Structure

Author: Domenico Cerone Creation Date: 02/10/2025
Last Reviewer: Domenico Cerone

This document describes the folder structure and main files of the Gateway project, focusing on core components for SSO authentication, routing, and multi-brand integration.

Overview

The project structure is organized in a modular way to separate responsibilities between assets, components, configuration, data management, and utilities.

src/
├── asset/
│   ├── fonts/ (tommy-hilfiger only)
│   ├── logo/
│   ├── lottie/
│   └── tommy-hilfiger/ (or david-beckham/)
├── component/
│   ├── container/
│   │   ├── card/
│   │   │   ├── CardContainerGrid.js
│   │   │   ├── CardContainerHorizontal.js
│   │   │   ├── CardContainerHorizontalFullScreen.js
│   │   │   ├── CardContainerTwoC.js
│   │   │   └── CardContainerTwoCFull.js
│   │   └── glasses/
│   │       └── GlassesContainer.js
│   ├── mirror-component/
│   │   ├── Accordion.js
│   │   ├── AnimatedButton.js
│   │   ├── BrandHeader.js
│   │   ├── BrandsPages.js
│   │   ├── ButtonColorVariants.js
│   │   ├── ButtonTryOn.js
│   │   ├── ButtonWithIcon.js
│   │   ├── CardButton.js
│   │   ├── CardFullWidth.js
│   │   ├── CategoriesContainer.js
│   │   ├── ConsentManager.js
│   │   ├── CustomInfoWindows.js
│   │   ├── customStyleMaps.js
│   │   ├── FaceUndetectedMessage.js
│   │   ├── FilterByGender.js
│   │   ├── FilterByShape.js
│   │   ├── FlexContainerVertical.js _(Tommy only)_
│   │   ├── Footer.js
│   │   ├── FooterVtoMenu.js
│   │   ├── GlassesList.js
│   │   ├── GlassesSize.js
│   │   ├── HDOpen.js
│   │   ├── Header.js
│   │   ├── IconBackShop.js
│   │   ├── MiniaturePhoto.js
│   │   ├── MirrorGlassesCardBrandPage.js
│   │   ├── MirrorGlassesCardHorizontal.js
│   │   ├── MirrorHeader.js
│   │   ├── MirrorMenu.js
│   │   ├── mirrorScreenSaver.js
│   │   ├── MirrorVtoMenu.js
│   │   ├── ModalPassword.js
│   │   ├── ModelViewerComponent.js
│   │   ├── PermissionAndPolicy.js
│   │   ├── RootMenu.js
│   │   ├── RootSelector.js
│   │   ├── SearchBar.js
│   │   ├── SingleBrandPage.js
│   │   ├── SingleGlassesPage.js
│   │   ├── SizeColorBar.js
│   │   ├── StoreLocatorPage.js
│   │   ├── SubHeader.js
│   │   ├── SusIncPage.js _(Tommy only)_
│   │   ├── TheIcons.js _(David only)_
│   │   └── TransitionScreen.js
│   └── vto-component/
│       ├── LoadingScreen.js
│       ├── ModalPhotoShare.js
│       ├── ModalQR.js
│       ├── QrCodePage.js
│       ├── SaveFrameButton.js
│       ├── SliderComponent.js
│       └── VariantCard.js
├── css/
│   └── (various .css and .module.css files)
├── data/
│   ├── constant/
│   │   ├── config.js
│   │   └── constants.js
│   ├── Mock/
│   │   └── StoreMock.js
│   ├── base.js
│   ├── CatalogueDataContext.js
│   ├── images.js
│   ├── IndexedDb.js
│   └── lottie.js
├── modello/
│   ├── BrandContent.js
│   ├── Catalogue.js
│   ├── CatalogueProduct.js
│   ├── CatalogueVariant.js
│   ├── GlassesContent.js
│   ├── SessionGateway.js
│   ├── Tag.js
│   └── TakeFotoTemplate.js
├── pages/
│   ├── HomePage.js
│   ├── MirrorVto.js
│   └── ModalVto.js
├── policies/
│   ├── privacy/
│   └── terms/
├── Utils/
│   ├── LanguageUtils/
│   │   └── i18n.js
│   ├── vto-utils/
│   │   ├── EffectRenderer.js
│   │   ├── FaceMeshSingleton.js
│   │   ├── imageUtils.js
│   │   └── OneEuroFilter.js
│   ├── cookiesUtilities.js
│   └── function.js
├── App.js
├── index.js
├── reportWebVitals.js
├── RouterQuery.js
├── service-worker.js
└── serviceWorkerRegistration.js

Quick Navigation:

• Assets: fonts/ (tommy-hilfiger only) | logo/ | lottie/ | tommy-hilfiger/ (or david-beckham/)
• Components: Container Components | Mirror Components (44 unique components) | VTO Components (7 components)
• CSS: CSS files (various .css and .module.css files)
• Data: Configuration | Mock Data | Root Data Files
• Modello: Model Classes (8 ES6 classes with Firebase converters)
• Pages: Main Application Pages (HomePage, MirrorVto, ModalVto)
• Policies: Privacy Policy | Terms & Conditions
• Utils: Language Utils | VTO Utils | Cookies & Functions
• Root Files: Application Bootstrap (App.js, index.js, service workers, routing)

asset/

fonts/ (tommy-hilfiger only)

Font family management system providing the complete Futura-Thin typeface collection in professional .otf format for consistent brand typography across the Gateway ecosystem.

logo/

Comprehensive SVG icon system and brand asset management providing scalable vector graphics for optimal quality at any resolution, including essential files like arshades-share.svg.

lottie/

Advanced animation system utilizing Lottie JSON format for smooth, lightweight animations that enhance user experience, including loading animations like lottie-loading.json.

tommy-hilfiger/ (or david-beckham/)

Brand-specific asset management containing customized resources for each partner brand, including optimized preload graphics like preload2.png for fast initial page rendering.

component/

container/card/

Card layout components providing flexible container systems for dynamic product display with various grid and scrolling patterns.

CardContainerGrid.js

Purpose: Advanced grid layout system providing dynamic mixed-size card arrangements with intelligent pattern repetition and gradient background management for enhanced visual hierarchy.

Key Features: Implements a 9-card size pattern (large, small, small, extra-large, small, small, small, small, medium) with 4 predefined gradient backgrounds that rotate randomly to avoid repetition, 3-column CSS Grid layout with 5px gaps, and automatic overflow handling with 65px vertical transform.

Implementation: React forwardRef component using CSS Grid with gridTemplateColumns: "repeat(3, 1fr)", useRef for gradient rotation state management, size mapping system (small: 1x1, medium: 2x1, large: 2x2, extra-large: 3x3), gradient application every 4th card, and click event delegation through onCardClick props.

CardContainerHorizontal.js

Purpose: Horizontal scrolling container with active card detection, mouse drag functionality, and smooth scroll-to-center functionality for intuitive user navigation through card collections.

Key Features: Real-time active card tracking based on container center position with distance calculations, comprehensive mouse drag support with dragging state management, smooth scrolling animation with automatic centering, drag prevention for clicks, and customizable margin (default 40%) and background props.

Implementation: React forwardRef with useState for activeIndex and drag states (isDragging, hasDragged, startX, initialScrollLeft), useEffect for scroll event listeners and mouse event handling, mathematical calculations for determining closest card to center, drag threshold detection (5px minimum), and smooth scrollTo animations with behavior: 'smooth'.

CardContainerHorizontalFullScreen.js

Purpose: Full-screen horizontal container optimized for tablet landscape orientation with advanced touch gesture support and card-by-card navigation for enhanced mobile experience.

Key Features: Device orientation detection using media queries for tablet landscape mode (768px+ with landscape orientation), touch gesture recognition with 50px swipe threshold, adaptive card sizing (50% width in landscape, 100% in portrait), scroll snap functionality with 'x mandatory', mouse drag support with grab cursors, and drag prevention for clicks.

Implementation: React forwardRef with useState for device detection and drag states, useEffect for window resize listeners and media query detection, touch event handling (touchstart/touchend) with deltaX calculations, mouse drag functionality with threshold detection, scroll clamping with maxScrollLeft calculations, and CSS flexbox with scrollSnapType for smooth navigation.

CardContainerTwoC.js

Purpose: Simple two-column container layout providing basic margin management and responsive positioning for straightforward card arrangements.

Key Features: Configurable top and bottom margins with percentage-based defaults (marginTop: 40%, marginBottom: 10%), clean CSS class-based styling with "card-container-twoc", and minimal functional component approach for maximum flexibility.

Implementation: Functional React component with inline style props for margin control, customizable margin and marginBottom props with sensible defaults using nullish coalescing (??), and CSS class-based styling integration for external customization.

CardContainerTwoCFull.js

Purpose: Minimal full-width container variant designed for maximum screen utilization with no margin management for completely immersive card displays.

Key Features: Ultra-minimalist design with no margin controls, full-width layout maximizing screen real estate, single CSS class "card-container-full" for external styling, and streamlined component structure for optimal performance.

Implementation: Simple functional React component with no props beyond children, single CSS class integration for external styling control, and minimal code footprint for maximum rendering performance.

container/glasses/

Specialized glasses display container providing enhanced visual presentation with custom gradient backgrounds.

GlassesContainer.js

Purpose: Specialized container for eyewear product displays featuring warm radial gradient background that enhances product presentation and visual appeal.

Key Features: Custom radial gradient background with elliptical shape centered, transitioning from warm cream (#ffe8cc) at 40% to light gray (#f5f5f5) at 70%, optimized for eyewear product photography and display, and CSS class "glasses-container" for additional styling.

Implementation: Simple functional React component with inline radial gradient styling using radial-gradient(ellipse at center, #ffe8cc 40%, #f5f5f5 70%), CSS class integration for external customization, and flexible children rendering for various eyewear display layouts.

mirror-component/

Accordion.js

Purpose: Collapsible content panel system providing organized information display with persistent state management and visual feedback for enhanced user experience in Mirror interfaces.

Key Features: Dynamic panel expansion with conditional CSS classes (expanded, active-title, active-read, active-arrow, rotate), persistent opened state tracking through persistOpened array, conditional styling based on panel status and persistence history, animated arrow rotation for open state, and "READ" label with visual indicators.

Implementation: Functional React component with props (panel, openPanel, handlePanelChange, persistOpened, children, title), conditional class application based on isOpen and isPersisted states, click event handling for panel toggle, and conditional content rendering with accordion header structure.

AnimatedButton.js

Purpose: Specialized button component for clip-on accessories management providing visual feedback for applying/removing clip-on elements during AR try-on sessions with Tommy Hilfiger branding.

Key Features: Conditional rendering based on isAnimated prop (returns null if false), disabled state management with button-disabled CSS class, dynamic text content switching between "APPLY CLIP-ONS" and "REMOVE CLIP-ONS" based on isClipped state, Tommy Hilfiger play icon integration, white text styling, and complete accessibility support.

Implementation: Functional React component with props (isAnimated, isButtonDisabled, isClipped, onClick), early return for non-animated state, conditional CSS class application, SVG icon import from tommy-hilfiger assets (play_icon.svg), and inline styling for text color with button disabled state handling.

BrandHeader.js

Purpose: Simple header component providing consistent title and subtitle presentation with HTML content support for brand-specific messaging across Mirror interfaces.

Key Features: Conditional title rendering based on title prop presence, HTML content support through dangerouslySetInnerHTML for rich text formatting in subtitles, CSS class-based styling with header-container-brandheader and subtitle-brandheader, and clean modular structure for flexible content presentation.

Implementation: Functional React component with props (title, text), conditional rendering for both title and text elements, dangerouslySetInnerHTML implementation for HTML content in subtitles, and CSS class integration for external styling control.

BrandsPages.js

Purpose: Brand selection page component managing brand showcase with filtered brand display and brand navigation functionality within the Mirror interface.

Key Features: Internationalization support using react-i18next for title and subtitle, brand filtering excluding specific IDs ('USamwu7Ywd2oNAU5eL50', 'Nqyd5EKyrBb3fufpJyKS'), CardContainerTwoC integration with zero margin, dynamic brand rendering with cover image backgrounds, and brand selection callback handling.

Implementation: Functional React component with useTranslation hook, props (allBrands, handleSelectedBrand), MirrorTittle component for header display, brand filtering logic with hardcoded exclusions, CardButton mapping with brand data (cover_image, nome_brand), and brand selection event handling.

ButtonColorVariants.js

Purpose: Advanced color variant selection interface component supporting multiple template layouts (Vanilla 1, 3, 4) for eyewear color and lens selection during AR try-on sessions.

Key Features: Three distinct template layouts (Vanilla 1: horizontal grid with priority sorting, Vanilla 3: horizontal scrollable, Vanilla 4: vertical scrollable), dynamic variant selection with useState management, priority-based sorting for optimal variant display, CSS custom properties for frame and lens colors (--color-frame-primary, --color-lenses-primary), real-time border selection indicators, and automatic lowest-priority variant selection.

Implementation: React functional component with useState for selectedVariant management, useEffect for variant synchronization and priority selection, template-based conditional rendering, priority sorting logic with infinity fallback, CSS custom properties for color theming, horizontal/vertical scrolling with touch optimization, and selection callback handling through handleChangeVariant and handleSelectedGlasses.

ButtonTryOn.js

Purpose: Template-based try-on activation button component providing immediate access to AR experience through modal integration with VTO functionality.

Key Features: Template system support (Vanilla 1), AR try-on session initiation through modal opening, integrated ModalVto and MirrorVto components, IMAGES asset integration for try icon, internationalization support for button text, modal state management, and fallback template handling.

Implementation: React functional component with template conditional rendering, props (button_tryOn_template, isModalOpen, handleOpenModal, handleCloseModal, t, buttonGlassesRef), IMAGES import for icon assets, ModalVto integration with showCloseButton disabled, and MirrorVto component rendering within modal.

ButtonWithIcon.js

Purpose: Template-based button component with forwardRef support providing language selection functionality and customizable styling options for Mirror interface navigation.

Key Features: React forwardRef implementation for ref passing, template system support (Button Vanilla 1), language selection handling through onSelectLanguage callback, customizable styling with color, backgroundColor, backgroundImage, and font props, CSS custom property integration for font family, and null return for unsupported templates.

Implementation: React forwardRef component with template conditional rendering (Button Vanilla 1), props (button_template, language, onSelectLanguage, icon, label, color, backgroundColor, backgroundImage, font), inline styling with style object construction, CSS class integration (button-vanilla, btn-text-vanilla, CTA-TEXT-vanilla), and fallback null return for unsupported templates.

CardButton.js

Purpose: Interactive card-style button component with forwardRef support providing product selection functionality with background image customization for enhanced visual presentation.

Key Features: React forwardRef implementation for ref passing, background image support through backgroundCover prop with CSS cover styling, conditional background application, modular structure with separate card button and content areas, click event handling, and flexible children content rendering.

Implementation: React forwardRef component with props (onClick, children, backgroundCover), background style object construction with backgroundImage, backgroundSize cover, and backgroundPosition center, conditional style application based on backgroundCover presence, CSS class structure (card-container-cardbutton, card-button, card-content), and children rendering in separate content area.

CardFullWidth.js

Purpose: Advanced Google Maps integration component providing interactive store locator functionality with marker clustering, custom styling, and info window management for retail location discovery.

Key Features: Google Maps integration with custom styling, marker clustering using MarkerClustererplus, store location grouping with spiral positioning for overlapping coordinates, custom pin icons (pin_th.svg), cluster styling with custom images (cluser_mup2.png), interactive info windows with CustomInfoWindow component, map restrictions and zoom controls, and store selection state management.

Implementation: React functional component with useState for map state management (center, selectedStore, activeMarker), Google Maps API integration with custom map options and styles, marker creation with spiral positioning algorithm for overlapping stores, MarkerClusterer implementation with custom styling, event handling for marker clicks and map interactions, and store data processing from stores2 mock data.

CategoriesContainer.js

Purpose: Advanced category display component organizing eyewear product categories with template support, modal image viewing, and specialized feature highlighting for enhanced product discovery.

Key Features: Category filtering by group (Gender, Forma, Featured), gender translation (Uomo→Man, Donna→Woman), template support (Vanilla 2) with special ADV Style functionality, modal image viewer for ADV Style images with loading states, FontAwesome camera icon integration, PropTypes validation, and specialized category detection (Sporty, Modern Preppy, Classy, ADV Style).

Implementation: React functional component with useState for modal and loading management, category filtering logic for Gender/Forma/Featured groups, template-based conditional rendering, modal overlay with click-outside-to-close, image loading with error handling, PropTypes for type safety, and CategoryBox sub-component with special styling and click handling.

ConsentManager.js

Purpose: Advanced multilingual consent management system providing GDPR-compliant privacy control with cookie management, portal rendering, and comprehensive translation support across 5 languages.

Key Features: Multilingual support (English, Italian, Spanish, French, German) with automatic language normalization, cookie-based consent state management using js-cookie, React portal rendering to document.body, modal overlay with customizable positioning for homepage vs other pages, consent status visualization with active/inactive indicators, privacy policy integration with callback handling, and consent revocation functionality.

Implementation: React functional component with useState for modal and consent state management, useEffect for cookie state initialization, language normalization logic with supported language validation, translation dictionary with complete text sets per language, ReactDOM.createPortal for modal rendering, CSS modules integration for styling (ConsentManager.module.css), SVG shield icon integration, and comprehensive prop-based configuration (onRevoke, onViewPrivacyPolicy, lang, isHomePage).

CustomInfoWindows.js

Purpose: Responsive store information modal component providing detailed store location data with Tommy Hilfiger branding, device-adaptive layout, and Google Maps integration for navigation assistance.

Key Features: Device orientation detection with landscape-specific sizing (768px+ tablets), responsive modal sizing (500px landscape, 320px portrait), Tommy Hilfiger brand integration with logo and colors, store information display (name, address), Google Maps navigation link integration, close button with SVG icon, overlay click-to-close functionality, and adaptive padding/font sizing based on device orientation.

Implementation: React functional component with useState for landscape detection, useEffect with media query listener for device orientation (min-device-width: 768px and landscape and min-device-height: 768px), responsive styling with conditional sizing, overlay management with fixed positioning and z-index stacking, Google Maps URL encoding for navigation, brand asset integration (BRAND_LOGO_TOMMY_SMALL, close_vector.svg), and comprehensive prop-based configuration (selectedStore, onClose).

customStyleMaps.js

Purpose: Google Maps custom styling configuration providing branded map appearance with carefully tuned color schemes for landscape, roads, water, and points of interest to match application design.

Key Features: Complete Google Maps style array configuration with 6 feature types (landscape, road.highway, road.arterial, road.local, water, poi), customized color schemes using hue, saturation, lightness, and gamma properties, branded color palette integration with warm tones (FFBB00 landscape, FFC200 highways), neutral road colors with reduced saturation, blue water styling (0078FF), and green point-of-interest markers.

Implementation: JavaScript ES6 export of customMapStyle array containing Google Maps styling objects, feature type specifications for different map elements, styler objects with precise color values and visual properties, and ready-to-use configuration for Google Maps API integration.

FaceUndetectedMessage.js

Purpose: AR feedback component providing user guidance when face detection fails during try-on sessions, featuring Lottie loading animation and clear messaging.

Key Features: "Face Undetected" messaging with modal backdrop overlay, Lottie animation integration using react-lottie-player, loading animation from lottie-loading.json asset, consistent messaging for user repositioning guidance, and modal backdrop styling with "modal-backdrop-on-people" class.

Implementation: Functional React component with Lottie import and configuration, animation data import from asset folder, fixed sizing (width: 50px) with play and loop enabled, CSS class-based styling for modal backdrop and message container, and simple component structure without props or state management.

FilterByGender.js

Purpose: Advanced gender-based filtering component with GSAP animations, dynamic gender detection, and comprehensive template system for eyewear collection browsing with AR navigation.

Key Features: Dynamic gender visibility calculation from glasses data, GSAP animation system with entrance/exit transitions, gender filtering by category (Uomo, Donna, Unisex, Kids), internationalization support with react-i18next, priority-based gender ordering, Vanilla 1 grid template support, Header and SubHeader integration with GATEWAY_STRUCTURE configuration, alternating button animations (left/right screen entry), and "See All" skip functionality.

Implementation: React functional component with useState for currentStato and visibleGenders, useRef for animation targets and button references, useEffect for page tracking, animation, and gender calculation, GSAP animation functions (animateOutElements, animateOutAndFilter), category filtering logic with group matching (Gender), timeout management for animation cycles, and comprehensive prop handling (handleFilterByGender, translate, handleSkip, onPageChange, setCurrentPage, PAGES, filteredGlassesList).

FilterByShape.js

Purpose: Advanced shape-based filtering component with tablet landscape detection, GSAP animations, and comprehensive template system for eyewear frame shape selection with AR navigation.

Key Features: Tablet landscape orientation detection (768px+ with landscape), shape filtering by category (Forma group), GSAP animation system with entrance/exit transitions, dynamic filtered glasses list management, initial list filtering by selectedType (Tipologia), internationalization support with react-i18next, Vanilla 1 grid template support, Header and SubHeader integration with GATEWAY_STRUCTURE configuration, alternating button animations, and "See All" skip functionality.

Implementation: React functional component with useState for currentStato and isTabletLandscape, useRef for animation targets, useEffect for page tracking, device detection, and list initialization, GSAP animation functions (animateOutElements, animateOut), category filtering by Tipologia group, media query listener for responsive design, timeout management for animation cycles, and comprehensive prop handling (allShapes, handleShapeFilter, translate, type, handleSkip, onPageChange, onShapeSelected, setCurrentPage, PAGES, selectedType, listOfGlasses, setFilteredGlassesList).

Footer.js

Purpose: Simple footer component providing essential legal links and ARShades branding with customizable text color for consistent brand presentation.

Key Features: Legal links display (Privacy policy | Terms And Condition), ARShades powered-by branding with external link (arshades.it), customizable text color through props.textColor, target="_blank" for external navigation, and clean minimal design with consistent styling.

Implementation: Functional React component with props (textColor), inline styling for text color customization, external link integration with rel="noopener noreferrer" for security, and CSS class-based layout (footer, terms, poweredBy).

FooterVtoMenu.js

Purpose: Minimal VTO footer container component providing flexible layout structure for try-on session controls and menu elements.

Key Features: Simple children rendering for flexible content inclusion, CSS class-based styling (footer-vto-menu), minimal component structure for maximum flexibility, and clean container design for VTO-specific footer elements.

Implementation: Functional React component with children prop, single CSS class integration for external styling, and minimal code footprint for optimal performance in VTO environments.

GlassesList.js

Purpose: Advanced eyewear catalog component providing comprehensive product browsing with sophisticated filtering, GSAP animations, auto-scroll functionality, and two-column layout with extensive modal filter system.

Key Features: Comprehensive filter system (Material, Shape, Polarized, Featured) with dynamic availability checking, advanced GSAP auto-scroll animations with tablet landscape detection, two-column product layout with mouse drag functionality, filter modal with scrollable sections and real-time result counting, dynamic typology name extraction with abbreviation logic, animation control with minimum glasses requirements (10+ total, 5+ per column), arrow navigation with conditional visibility, device-specific optimization (iPad landscape vs portrait), and extensive state management integration with CatalogDataContext.

Implementation: React functional component with multiple useState hooks (filteredGlasses, isFilterModalOpen, initialFilteredGlasses, showDynamicArrow), useRef for animation targets and drag detection, useContext for catalog state management, comprehensive useEffect for page tracking, animation management, and filter application, GSAP animation system with entrance/exit transitions, timeout management for auto-scroll cycles, filter logic with category group matching (Gender, Forma, Materiale, Featured, Polarised, Tipologia), mouse drag functionality with threshold detection, and extensive prop handling for navigation and state management.

GlassesSize.js

Purpose: Simple size selection component enabling users to choose appropriate eyewear sizes with clear visual indicators and selection handling.

Key Features: Size data rendering with sizeData mapping, selected size highlighting with conditional CSS classes (item-dot-size vs item-dot-size-unselected), size code comparison using selectedSizeCode, size selection callback through handleSelectedSize, and clean title display ("GLASSES SIZE:").

Implementation: Functional React component with props (sizeData, selectedSizeCode, handleSelectedSize), array mapping for size display, conditional className application based on selection state, click event handling for size selection, and CSS class-based styling (select_size, select_size_title).

HDOpen.js

Purpose: QR code modal component providing external VTO access through Safilo WebVTO platform with brand and variant specific URL generation.

Key Features: QR code modal integration using ModalQR component, dynamic URL generation for Safilo WebVTO platform (https://www.safilo.webvto.it/), brand and variant ID parameter handling, modal backdrop with click-to-close functionality, conditional rendering based on selectedBrand and selectedVariant availability, and black/white QR code styling.

Implementation: Functional React component with props (onClose, selectedBrand, selectedVariant), early return for missing props validation, dynamic URL construction with brand.id and variant.id parameters, ModalQR component integration with color configuration (fgColor: "#000000", bgColor: "#ffffff"), and modal backdrop styling with click event handling.

Header.js

Purpose: Multi-template header component providing flexible branding and navigation layouts with click handling and typology name display across different Mirror interface contexts.

Key Features: Four distinct template layouts (Vanilla 1: homepage with background color, Vanilla 2: single glasses page, Vanilla 4: glasses page with typology label), dynamic component styling with componentColor background, brand logo integration through componentLogo, optional typology name display, click event handling through onHeaderClick callback, and fallback template handling.

Implementation: Functional React component with template-based conditional rendering, props (template, componentColor, componentLogo, typologyName, onHeaderClick), inline styling for background colors, CSS class-based layout (container-logo-homepage, logo-container-singleglaspage, logo-container-page-glasses), and conditional typology label rendering in Vanilla 4 template.

IconBackShop.js

Purpose: VTO navigation bar component providing session controls with responsive text adaptation and Tommy Hilfiger branding for AR try-on interface.

Key Features: Screen size detection with 768px+ threshold for responsive text display, Vanilla 1 template support with three-button layout (CLOSE, SHOOT AND SHARE, ALL/ALL GLASSES), Tommy Hilfiger icon integration (icon_shoot.svg), conditional store locator visibility, responsive text adaptation ("ALL GLASSES" vs "ALL" based on screen size), central shoot-and-share button with icon, and click event handling for multiple navigation actions.

Implementation: React functional component with useState for isLargeScreen detection, useEffect for window resize listeners, template-based conditional rendering (Vanilla 1), props (onBackClick, onShopClick, onShootShareClick, handleSkip, visibleStoreLocator, template), responsive design with media query detection, click event combinations (handleAllThreeClick), and CSS class-based styling (bar-back-shop-v2, menu-item-vto, central-button).

MiniaturePhoto.js

Purpose: Photo thumbnail component with modal functionality, delete capability, and responsive design for AR photo management interface.

Key Features: Dual view modes (single vs standard) with responsive sizing, modal state integration with conditional CSS classes (photo-modal vs photo-modal-close), background image styling with image prop, delete functionality with trash icon integration (trash.png), click-to-open modal action through openModalAction, and responsive container styling based on isSingleView mode.

Implementation: Functional React component with props (isModalOpen, isSingleView, image, openModalAction, trash), conditional CSS class application, background image styling with inline styles, Tommy Hilfiger trash icon integration, click event handling for modal and delete actions, and responsive CSS class structure (miniature-container vs miniature-container-single).

MirrorGlassesCardBrandPage.js

Purpose: Advanced eyewear card component for brand pages with priority-based image selection, unique color variant calculation, and integrated category display for enhanced product presentation.

Key Features: React forwardRef implementation with ref passing, priority-based variant selection using lowest priority algorithm, comprehensive image fallback system (image3D, poster, poster2, poster3, poster4), unique color variant calculation using CatalogDataContext, color display limited to first 3 variants with overflow indicator (+N), CategoriesContainer integration with Vanilla 1 template, active state management with conditional styling, and click event handling with isActive validation.

Implementation: React forwardRef component with useContext for CatalogDataContext, useState for coverUrl and listOfColors, useEffect for variant processing and color calculation, priority-based sorting and selection logic, comprehensive image fallback handling, unique color extraction using getAllUniqueColorsFromGlasses, CSS custom properties for color variants (--color-frame-primary, --color-lenses-primary), and extensive prop handling (glasses, onCardClick, isActive).

MirrorGlassesCardHorizontal.js

Purpose: Responsive horizontal eyewear card component with iPad landscape optimization, ADV Style labeling, and adaptive layout for enhanced product browsing experience.

Key Features: iPad landscape detection (768px+ with landscape and 768px+ height), dual layout modes (landscape vs portrait) with different element arrangements, priority-based variant sorting with image3D selection, unique color variant counting using CatalogDataContext, ADV Style detection and labeling with conditional positioning, responsive text sizing and positioning, drag handling integration with isDraggingRef, and color variant count display.

Implementation: React forwardRef component with useContext for CatalogDataContext, useState for coverUrl, colorVariantsCount, and isIpadLandscape, useEffect for variant processing and device detection, media query listener for responsive design, priority-based sorting logic, unique color calculation using getAllUniqueColorsFromGlasses, conditional layout rendering based on device orientation, and comprehensive prop handling (glasses, onCardClick, isActive, isDraggingRef).

MirrorHeader.js

Purpose: Flexible Mirror title component with forwardRef support, internationalization, and optional skip functionality for AR interface navigation.

Key Features: React forwardRef implementation for animation targets, internationalization support using react-i18next, optional skip button with conditional rendering, customizable margin top with type2 prop, title and subtitle display, skip button integration with translation ("or_skip_and_go_to_glass"), and CSS class-based styling.

Implementation: React forwardRef component with useTranslation hook, props (title, subtitle, skip, handleSkip, type2), conditional skip button rendering based on skip prop, conditional margin top styling with type2 integration, CSS class structure (header-container-mirrorheader, title, subtitle-mirrorheader, subtitle2-mirrorheader, skipBtn), and click event handling for skip functionality.

MirrorMenu.js

Purpose: Advanced navigation menu component with responsive design, state management, and comprehensive page-specific functionality for Mirror AR interface navigation.

Key Features: Responsive screen size detection (768px+ threshold), complex state management for menu interactions (isAllGlassesSelected, isEyewearEnabled), page-specific menu layouts (single glasses page vs standard navigation), internationalization support with react-i18next, conditional menu item visibility based on page state, central "TRY IT ON" button with prominence styling, dynamic text adaptation ("ALL GLASSES" vs "ALL"), and comprehensive click event handling.

Implementation: React functional component with useState for responsive detection and menu states, useEffect for window resize listeners and state resets, internationalization with useTranslation hook, conditional rendering based on page states (isSingleGlassesPage, isOnBrandPage, isOpenStoreLocator, etc.), complex prop handling for navigation callbacks, CSS class-based styling with conditional classes (menuItemDisable, showText/hideText), and extensive state management logic for menu flow control.

mirrorScreenSaver.js

Purpose: Advanced screen saver component with multi-stage loading sequence, device detection, video management, and branded presentation for Mirror kiosk idle states.

Key Features: Three-stage loading sequence (preload images → preload2 → video), device-specific detection (mobile vs desktop) with adaptive video sources, GSAP animation system for smooth transitions, Lottie animation integration using react-lottie, SessionGateway integration for activity tracking, responsive sizing based on device type, dynamic color adaptation based on current stage, video loop management with multiple video support, and click-to-start experience functionality.

Implementation: React functional component with multiple useState hooks (screenSaver, currentVideoIndex, currentStage, videoSource, isMobileDevice), useRef for animation targets, device detection using navigator.userAgent and media queries, stage progression with loading progress monitoring, GSAP animations with fade transitions, Lottie configuration with Tommy Hilfiger branding, video source selection (SCREEN_SAVER_VIDEO_MOBILE vs SCREEN_SAVER_VIDEO_LANDSCAPE), responsive styling with conditional sizing, and comprehensive asset integration (preload.png, preload2.png, lottie animations).

MirrorVtoMenu.js

Purpose: VTO menu component managing variant display and size selection during AR try-on sessions with dynamic container layout and component integration.

Key Features: VariantCard integration for model display, SizeSelector component integration, dynamic header display with glasses name and brand information, adaptive container layout based on list length (menu_container vs menu_container-desk for >3 vs ≤3 items), menuRef forwarding for external reference management, and comprehensive prop-based configuration.

Implementation: Functional React component with conditional header rendering based on modelData availability, VariantCard mapping with key-indexed rendering, SizeSelector component integration, dynamic CSS class application based on listLenght threshold, ref forwarding through menuRef and cardRefs arrays, and extensive prop handling (modelData, handleSelectedGlasses, selectedCode, brandData, listLenght, cardRefs, menuRef, sizeData, selectedSizeCode, handleSelectedSize).

ModalPassword.js

Purpose: Simple modal overlay component providing customizable modal presentation with optional close functionality and flexible content rendering.

Key Features: Conditional rendering based on isOpen prop with early return optimization, modal overlay with dark backdrop (rgba(0, 0, 0, 0.5)), customizable modal content with inline styling (350x400px square modal), optional close button with conditional rendering via showCloseButton prop, flexible children content rendering, and comprehensive styling with fixed positioning and centering.

Implementation: Functional React component with conditional rendering logic, inline style objects for overlay and content styling (overlayStyle, contentStyle, closeButtonStyle), flexbox centering with fixed positioning, z-index management (1000), comprehensive prop handling (isOpen, children, onClose, showCloseButton), and clean modal design with border radius and box shadow.

ModelViewerComponent.js

Purpose: Advanced 3D model viewer component with animation support, tablet detection, and SessionGateway integration for interactive eyewear visualization using model-viewer web component.

Key Features: React forwardRef implementation with model-viewer web component integration, animation system with clip-on and explosion animations ("Clip on full", "explosion_glasses_an_1"), tablet detection (768px+ width and 600px+ height), SessionGateway integration for 3D interaction tracking, camera controls with orbit restrictions (maxCameraOrbit, minCameraOrbit), dynamic animation button with expand icon, comprehensive model-viewer configuration (disable-pan, exposure, tone-mapping, shadow-intensity), and conditional animation availability detection.

Implementation: React forwardRef component with useState for animation states and device detection, useRef for model viewer reference, useEffect for tablet detection and model event listeners, SessionGateway integration for interaction tracking, animation control functions (startAnimation) with timeScale manipulation, camera orbit configuration on model load, conditional animation button rendering based on availableAnimations, Tommy Hilfiger asset integration (expand.png), and comprehensive prop handling (glassesVariant, onAnimationStateChange, handleShowDado).

PermissionAndPolicy.js

Purpose: Comprehensive multilingual privacy policy and terms management component providing GDPR compliance with accordion interface, ReactMarkdown rendering, and dynamic language switching.

Key Features: Five-language support (English, Italian, Spanish, French, German) with dynamic content loading, Accordion component integration for collapsible policy sections, ReactMarkdown with remarkGfm and rehypeRaw for rich content rendering, comprehensive policy file imports (terms and privacy policies per language), dynamic language switching with Apply button functionality, cookie management using js-cookie for consent and language preferences, SessionGateway integration, custom ReactMarkdown components for styled rendering (tables, lists, headers), view mode vs accept mode functionality, and fallback handling for missing language files.

Implementation: React functional component with useState for accordion, language, and content management, useEffect for dynamic policy loading with fetch operations, language normalization logic with supported language validation, Accordion integration with persistent opened states, comprehensive ReactMarkdown styling with custom component mappings, cookie management for consent persistence, dynamic UI text translations with language-specific text objects, and extensive prop handling (isViewMode, onCloseView, accepAction).

RootMenu.js

Purpose: Template-based root navigation menu component managing button layout with background image cycling and specialized button handling for main and special navigation functions.

Key Features: Vanilla 1 template support with button categorization (main buttons vs special buttons: 'Shop Now', 'Store'), background image cycling for multiple image arrays, ButtonWithIcon integration with comprehensive prop forwarding, specialized button row for 'Shop Now' and 'Store' buttons, language-based navigation with callback handling (onlineShop, storeLocator), and useRef array management for button references.

Implementation: React functional component with useRef for button reference management, template-based conditional rendering (Vanilla 1), button filtering logic to separate main and special buttons, background image cycling with modulo operations for array indexing, comprehensive prop forwarding to ButtonWithIcon components, and callback handling for specialized navigation functions (handleShopButtonClick, handleFindStoreButtonClick).

RootSelector.js

Purpose: Primary selection interface component providing initial user choices and interface mode selection within the Mirror system.

Key Features: PermissionAndPolicy modal integration with cookie-based visited state management, SessionGateway integration for session tracking and analytics, GSAP animations for entrance effects with staggered button animations, Firebase Firestore integration for catalog data fetching, dynamic store locator visibility based on catalog configuration, comprehensive component integration (Header, SubHeader, RootMenu), FlexContainerVertical layout management, and ARShades powered-by branding.

Implementation: React functional component with multiple useState hooks (isPopupVisible, sessionStarted, visibleStoreLocator, currentStato), useRef for animation targets, useEffect for page tracking, GSAP animations, catalog fetching, and session management, Firebase Firestore integration with doc and getDoc operations, SessionGateway session management with localStorage integration, GSAP entrance animations with rotation and positioning effects, GATEWAY_STRUCTURE configuration integration, and comprehensive prop handling (onSelectLanguage, onPageChange, catalogId, onVisibleStoreLocatorChange).

SearchBar.js

Purpose: Advanced store locator search component with Firebase cities integration, Google Maps API integration, real-time search suggestions, and geolocation services for comprehensive store discovery.

Key Features: Firebase cities collection integration with caching for performance, dual search functionality (stores and cities) with categorized results, real-time search suggestions with match type prioritization (city, street, name), Google Maps integration with zoom calculation and location services, geolocation support with permission handling and session coordinate fallback, comprehensive search filtering with relevance scoring, store suggestion limit (15) and city limit (5), Tommy Hilfiger branding integration, and search timeout management for performance optimization.

Implementation: React functional component with useState for search state management, useRef for input reference and timeout control, useEffect for cities cache loading, Firebase Firestore integration for cities collection, sophisticated search algorithms with relevance scoring, Google Maps API integration for location services, geolocation with permission handling and error management, comprehensive prop handling (stores, onSearch, mapRef), and extensive asset integration (position_vector.svg, location_searchbar.svg, BRAND_LOGO_TOMMY_SMALL).

SingleBrandPage.js

Purpose: Comprehensive brand page component with dynamic content rendering, scroll tracking, mouse scroll functionality, and GATEWAY_STRUCTURE integration for brand-specific presentations.

Key Features: Dynamic component rendering system (Header, Text, Video, Image, CardType) based on GATEWAY_STRUCTURE configuration, advanced scroll tracking with SessionGateway integration and localStorage persistence, mouse scroll functionality with drag detection and click prevention, comprehensive card container integration (CardContainerHorizontalFullScreen vs CardContainerHorizontal), tag-based glasses filtering with hardcoded target tag support, isDraggingRef integration for preventing accidental clicks during drag operations, and ARShades powered-by branding integration.

Implementation: React functional component with useRef for container and card references, useState for scroll tracking and drag management, useEffect for scroll event handling and page tracking, advanced mouse scroll implementation with drag threshold detection, dynamic component rendering with switch-case logic, comprehensive prop handling (selectedBrand, listOfGlasses, handleCardClick, onPageChange, setCurrentPage, PAGES), GATEWAY_STRUCTURE integration for configuration-driven rendering, and extensive scroll event management with cleanup.

SingleGlassesPage.js

Purpose: Advanced product detail page with comprehensive SessionGateway integration, GSAP animations, CatalogDataContext management, and dynamic component configuration for individual eyewear presentation.

Key Features: Comprehensive SessionGateway integration with page analytics tracking and resume functionality, advanced variant management with priority-based selection and unique color calculation, GSAP entrance animations with staggered component effects, CatalogDataContext integration for variant and size management, dynamic logo selection based on device orientation (iPad landscape detection), modal Features overlay with product specifications, ModelViewerComponent integration for 3D visualization, GATEWAY_STRUCTURE configuration system, and comprehensive component integration (Header, SubHeader, CategoriesContainer, ButtonColorVariants, ButtonTryOn).

Implementation: React functional component with extensive useState management (showDado, shouldAnimate, isModalOpen, selectedSize, isPageInitialized), useRef for animation targets, useContext for CatalogDataContext, useEffect for session management, variant calculation, VTO return handling, and device detection, SessionGateway integration with page analytics and resume logic, GSAP animations with complex timing and positioning, comprehensive prop handling (selectedGlasses, setCurrentPage, PAGES, justReturnedFromVto, onVtoReturnHandled), and Vanilla 1 template-based rendering with fallback handling.

SizeColorBar.js

Purpose: Advanced responsive size and color selection bar with device-specific layouts, dynamic sizing calculations, and comprehensive ButtonColorVariants integration for VTO interfaces.

Key Features: Responsive layout with iPad landscape vs mobile detection and adaptive styling, dynamic bar height calculation based on color variant count with min/max limits, comprehensive size selection with visual indicators (polygon icons), ButtonColorVariants integration with template switching (Vanilla 4 vs Vanilla 3), dynamic width calculation for mobile layout with component-based sizing, ruler icon integration with orientation-specific rotation, and comprehensive prop forwarding for size and color management.

Implementation: React functional component with device detection logic for responsive design, dynamic styling calculations for bar dimensions, template-based ButtonColorVariants integration, comprehensive prop handling (sizes, selectedSize, onSizeSelect, button_colorVariants_template, listOfVariant, selectedVariant, etc.), ruler and polygon asset integration (ruler.png, polygon1.png, polygon2.png), responsive flex layout with percentage-based distribution, and extensive conditional styling based on device orientation and variant count.

StoreLocatorPage.js

Purpose: Store locator page component integrating SearchBar and Google Maps for comprehensive store discovery with location-based search functionality.

Key Features: CardContainerTwoCFull layout integration for dual-panel design, SearchBar and CardContainerBig (Google Maps) component integration, mock store data integration (stores2), Google Maps API integration with pan and zoom functionality, search location handling with coordinate validation, page tracking with onPageChange callback, and perspective styling for 3D effect presentation.

Implementation: React functional component with useRef for Google Maps reference, useEffect for page tracking, handleSearch function with Google Maps LatLng integration and zoom control (maxZoom: 18), coordinate validation with error handling, CardContainerTwoCFull wrapper with minimal margin (5px), and comprehensive prop handling (onPageChange) for navigation tracking.

SubHeader.js

Purpose: Multi-template sub-header component providing flexible title and subtitle display with HTML content support and glasses name integration for various interface contexts.

Key Features: Three distinct template layouts (Vanilla 1: HTML content with dangerouslySetInnerHTML, Vanilla 3: glasses name with subtitle, Vanilla 4: glasses name only), HTML content rendering support for rich text formatting, selectedGlasses integration for dynamic content display, CSS class-based styling for different contexts (subtitle-mirrorheader-root, title-singleglaspage, subtitle-singleglaspage), and fallback template handling with error message.

Implementation: Functional React component with template-based conditional rendering, dangerouslySetInnerHTML for HTML content support, props (template, title, selectedGlasses), CSS class-based styling system, and comprehensive template validation with default fallback rendering.

TransitionScreen.js

Purpose: Simple transition loading screen component with animated rings loader and lens polishing message for VTO loading states.

Key Features: Conditional visibility with fade-out transition effects, react-loader-spinner Rings integration for visual feedback, branded loading message ("Please wait. We are polishing your lenses"), custom ring styling with purple color (rgba(78, 20, 116, 0.7)), and CSS class-based transition management (transition-screen, fade-out).

Implementation: Functional React component with conditional CSS class application based on isVisible prop, Rings loader component with custom color and sizing (200x200), accessibility support with ariaLabel, and simple transition state management.

FlexContainerVertical.js (Tommy only)

Purpose: Simple flex container component providing basic vertical layout structure with optional className customization for flexible content arrangement.

Key Features: Basic flex container functionality with CSS class integration (flex-container), optional className prop for additional styling, children rendering for flexible content inclusion, and minimal component structure for maximum performance.

Implementation: Functional React component with props (children, className), template literal class combination for default and custom styling, and simple container pattern for layout management.

SusIncPage.js (Tommy only)

Purpose: Comprehensive sustainability and inclusion page with Swiper carousel integration, dynamic component rendering, and responsive design for Tommy Hilfiger brand values presentation.

Key Features: Swiper carousel integration with Pagination and Mousewheel modules, dynamic component rendering system (Header, Text, Video, Carousel) based on GATEWAY_STRUCTURE configuration, responsive design with iPad detection and adaptive positioning, video error handling with fallback image support, component grouping for carousel presentation (images 8-11), device-specific slides per view calculation (desktop: 2, mobile: 1), and comprehensive prop handling for navigation.

Implementation: React functional component with useEffect for page tracking, dynamic component rendering with switch-case logic, Swiper configuration with custom pagination styling and mousewheel horizontal scrolling, responsive positioning with iPad detection (768px+ threshold), video error handling with DOM manipulation for fallback images, GATEWAY_STRUCTURE integration for configuration-driven content, and comprehensive styling with absolute positioning and scroll management.

TheIcons.js (David Beckham only)

Purpose: Advanced David Beckham iconic eyewear showcase page with responsive design, product discovery, and comprehensive product line presentation featuring DB Series 7 and DB Series 1 collections.

Key Features: Responsive design with mobile vs desktop layouts and device detection (768px breakpoint), comprehensive David Beckham asset integration (DB7000BOLD, DB7000CS, DB7000S, DB7000SFLAT, DB7020, DB1018, DB1007S), advanced product discovery with model name matching and fallback search functionality, CSS modules integration for scoped styling, dual Header integration with GATEWAY_STRUCTURE configuration, detailed product information presentation (DB Series 7 Style Pioneer, DB Series 1 Timeless Icons), and click-to-product navigation with glasses list integration.

Implementation: React functional component with useState for mobile detection and resize handling, useRef for container reference, useEffect for page tracking and resize listeners, sophisticated product matching logic with exact and partial name matching, comprehensive asset imports for David Beckham product images, CSS modules styling integration, responsive rendering with separate mobile and desktop layouts, detailed product information sections with brand storytelling, and extensive prop handling (onPageChange, setCurrentPage, PAGES, listOfGlasses, handleCardClick).

vto-component/

LoadingScreen.js

Purpose: Simple loading screen component providing visual feedback during VTO initialization with progress bar visualization for enhanced user experience.

Key Features: Dynamic progress bar visualization with real-time progress percentage display, CSS class-based styling for consistent loading interface, minimal component structure for optimal performance, and clean loading title presentation.

Implementation: Functional React component with props (loadingProgress), inline styling for dynamic progress bar width calculation, CSS class structure (loading-container, loading-title, progress-bar-container, progress-bar), and simple component design without state management.

ModalPhotoShare.js

Purpose: Advanced photo sharing modal component with template support, image processing capabilities, and banner generation for social media sharing integration.

Key Features: Multi-template support (Vanilla 1, Vanilla 2) with different layouts, SessionGateway integration for share analytics tracking, advanced image processing with banner addition and watermark integration, native browser sharing API integration with file sharing support, comprehensive image manipulation using Canvas API, responsive banner sizing based on device type, BRAND_CONFIG integration for catalog information, and fallback handling for unsupported browsers.

Implementation: React functional component with useState for imageBlob management, useEffect for image data processing, Canvas API integration for image manipulation, SessionGateway tracking for share events, template-based conditional rendering, comprehensive prop handling (modal_template, image, fotoTemplate, model, closeAction, isSingleView), base64 image processing with ArrayBuffer conversion, and extensive asset integration (arshades_share.svg, close_vector.svg).

ModalQR.js

Purpose: QR code modal component providing high-definition VTO access through mobile devices with responsive modal layouts and comprehensive branding integration.

Key Features: QRCodeSVG integration for dynamic QR code generation, responsive modal layouts (large vs small) with conditional positioning, AR position awareness (TOP vs bottom positioning), customizable QR code styling with background and foreground colors, ARShades branding integration with external links, mobile optimization messaging, and comprehensive styling customization.

Implementation: Functional React component with conditional modal sizing based on isLarge prop, QRCodeSVG component integration with custom styling options, responsive positioning based on project.arPosition configuration, props (isLarge, project, url, bgColor, fgColor, children), CSS class-based styling (modal, modal-small, modal-small-bottom), and ARShades branding with external link integration.

QrCodePage.js

Purpose: Dedicated QR code page component for desktop users providing mobile redirection with catalog-specific branding and alternative access options.

Key Features: React Router useParams integration for catalog ID extraction, QRCodeCanvas integration for QR code generation, BRAND_CONFIG integration for catalog-specific information, responsive design with desktop optimization, alternative catalog access links, ARShades branding and solutions discovery, and comprehensive catalog information display.

Implementation: React functional component with useParams hook for route parameter extraction, QRCodeCanvas component integration, BRAND_CONFIG catalog lookup with fallback handling, props (catalogId with DEFAULT_CATALOG_ID fallback), asset integration (logo_qrcode.svg), external link generation for catalog access, and comprehensive styling with QR code presentation.

SaveFrameButton.js

Purpose: Camera capture button component providing photo-taking functionality during VTO sessions with FontAwesome icon integration.

Key Features: FontAwesome camera icon integration (faCamera) for clear visual communication, simple click event handling for photo capture, CSS class-based styling for consistent button appearance, and minimal component structure for optimal performance.

Implementation: Functional React component with FontAwesome icon integration, props (onClick), CSS class structure (photo-container, take-photo, icon-take-photo), and simple event handling without state management.

SliderComponent.js

Purpose: Advanced 3D model adjustment slider component with multi-template support, vertex buffer manipulation, and branded styling for precise AR fitting control.

Key Features: Three template layouts (Vanilla 1, 2, 3) with different gradient styling and positioning, rc-slider integration with vertical orientation and custom dot styling, vertex buffer index management for 3D model manipulation, reset functionality with restart icon integration, PRIMARY_COLOR integration for brand consistency, dynamic handle styling with custom positioning, and comprehensive slider customization.

Implementation: React functional component with useState for selectedIndex and sliderValue management, useEffect for variant synchronization and reset handling, rc-slider component integration with custom styling, template-based conditional rendering, vertex buffer index array management, comprehensive prop handling (handleSelectedIndex, slider_template, selectedVariantGlb), asset integration (restart_icon.svg), and extensive styling customization per template.

VariantCard.js

Purpose: Simple variant selection card component providing visual variant display with selection indicators and ref management for VTO variant switching.

Key Features: Dynamic selection indicators with conditional CSS classes, poster image display for variant visualization, color frame information display, ref forwarding for external reference management, click event handling for variant selection, and minimal component structure for optimal performance.

Implementation: Functional React component with conditional CSS class application based on selectedCode comparison, ref management through cardRefs array, props (modello, index, cardRefs, selectedCode, handleSelectedGlasses), poster image integration, color frame display, and simple click event handling for variant selection.

css/

(various .css and .module.css files)

Purpose: Comprehensive styling system containing all CSS files for the Gateway application, including CSS Modules for component-specific styling and global stylesheets for application-wide consistency.

Key Features: CSS Modules architecture for scoped component styling with .module.css files, global stylesheets for base application styling and brand consistency, responsive design patterns with mobile-first approach and media queries, modern CSS Grid and Flexbox layouts for dynamic content arrangement, comprehensive font management with @font-face declarations, smooth animations and transitions for enhanced user experience, and cross-browser compatibility ensuring consistent presentation.

Implementation: Modular CSS architecture combining CSS Modules for component isolation with global styles for shared functionality, responsive design using media queries and modern layout techniques, CSS custom properties (variables) for maintainable brand theming, optimized font loading with font-display properties, comprehensive utility classes for rapid development, and performance-optimized stylesheets with minimal specificity conflicts.

data/

Purpose: Comprehensive data management system containing configuration files, constants, mock data, and data access layers for centralized application state management and Firebase integration.

Key Features: Centralized configuration management with brand-specific catalog IDs and routing, comprehensive constants system with asset imports and GATEWAY_STRUCTURE configuration, mock data integration for development and testing environments, Firebase Firestore integration with real-time data synchronization, IndexedDB implementation for offline data persistence and caching, React Context API integration for global state management, and modular architecture separating concerns between configuration, data access, and state management.

Implementation: Hierarchical data organization with constant/ subfolder for configuration files, Mock/ subfolder for development data, root-level files for core data services, Firebase SDK integration for cloud database operations, IndexedDB wrapper functions for local storage management, React Context providers for application-wide state distribution, and comprehensive error handling with fallback mechanisms for offline scenarios.

data/constant/

Centralized configuration management containing brand catalog configurations and asset constants.

config.js

Purpose: Centralized brand catalog configuration system managing DEFAULT_CATALOG_ID, CATALOG_IDS mapping, and BRAND_CONFIG for multi-brand Gateway implementations with David Beckham catalog support.

Key Features: Default catalog ID management (vKdbq9QtYNfjmnPFxvC4) used across HomePage, App, SessionGateway, ModalPhotoShare, and QrCodePage, comprehensive CATALOG_IDS object with David Beckham brand variants (DAVID_BECKHAM, DAVID_BECKHAM_OOH), BRAND_CONFIG mapping for title and catalog array associations, and centralized configuration documentation with JSDoc comments for developer reference.

Implementation: ES6 module exports with named constants, object-based configuration structure for easy maintenance and extension, catalog ID string management with Firebase document references, brand configuration objects with title and catalog array properties, and comprehensive commenting system explaining usage across different components.

constants.js

Purpose: Comprehensive constants management system containing asset imports, brand logos, background images, GATEWAY_STRUCTURE configuration, and application-wide constant values for David Beckham brand implementation.

Key Features: Extensive asset import system from david-beckham/ folder with optimized image formats (webp, jpg, svg), brand logo management (BRAND_LOGO_DBE variants) with different logo types, background image arrays for buttons and grids with responsive variants, comprehensive GATEWAY_STRUCTURE object defining page components and templates, screen saver video management with desktop and mobile variants, and primary color definition (#42B1AC) for brand consistency.

Implementation: ES6 import statements for asset management, named exports for easy component integration, object-based GATEWAY_STRUCTURE with nested component configurations, array-based image collections for dynamic background cycling, Firebase Storage URLs for video content delivery, and comprehensive constant organization by functionality (logos, images, videos, colors).

data/Mock/

Mock data provider system for development and testing environments.

StoreMock.js

Purpose: Mock store data provider for development and testing environments, containing sample store locations, coordinates, and metadata for store locator functionality testing without external API dependencies.

Key Features: Sample store location data with geographic coordinates, store metadata including names, addresses, and contact information, mock data structure matching production store API format, development environment support for offline testing, and comprehensive store information for various geographic locations.

Implementation: JavaScript object/array structure with store location data, geographic coordinate systems (latitude/longitude), mock data export for easy component integration, development environment configuration support, and data structure consistency with production store locator APIs.

base.js

Purpose: Firebase configuration and initialization module providing getFirebaseStorage function and core Firebase service setup for the Gateway application.

Key Features: Firebase SDK configuration and initialization, Firebase Storage service access through getFirebaseStorage() function, centralized Firebase service management, error handling for Firebase connection issues, and environment-specific configuration support for development and production deployments.

Implementation: Firebase SDK imports and configuration, service initialization functions, export of Firebase service accessors, environment variable integration for API keys and configuration, and comprehensive error handling for service initialization failures.

CatalogueDataContext.js

Purpose: Comprehensive React Context provider managing catalog data, product filtering, session state, and Firebase integration with 700+ lines of data management logic for the entire Gateway application.

Key Features: React Context API implementation with CatalogDataProvider, comprehensive product filtering by brand, gender, form, and type, Firebase Firestore integration for catalogs, products, tags, and variants, IndexedDB integration for offline data persistence, session state management with localStorage integration, product shuffling and randomization algorithms, comprehensive data transformation and processing functions, and extensive state management for filters, selections, and page states.

Implementation: React Context with useState and useEffect hooks, Firebase Firestore queries with real-time data synchronization, IndexedDB wrapper functions for local storage, comprehensive filtering algorithms with multiple criteria support, session management with persistent storage, data transformation functions for API response processing, and extensive error handling with fallback mechanisms for offline scenarios.

images.js

Purpose: Simple image asset management module providing centralized image imports and exports for the Gateway application.

Key Features: Centralized image asset management, ES6 module import/export system, optimized image loading and caching, asset organization by functionality or brand, and easy integration with React components.

Implementation: ES6 import statements for image assets, named exports for component integration, asset path management, and optimized loading strategies for different image formats and sizes.

IndexedDb.js

Purpose: IndexedDB wrapper providing comprehensive local storage management with 190+ lines of database operations for offline data persistence, session management, and application state caching.

Key Features: IndexedDB database initialization and version management, comprehensive data storage functions (catalogs, glasses, filters, selections), session state persistence with page state management, database reinitialization and cleanup functions, selection state management for filters and user choices, offline data synchronization capabilities, and extensive error handling with database operation safety.

Implementation: IndexedDB API wrapper functions with Promise-based operations, database schema management with version control, comprehensive CRUD operations for different data types, transaction management for data consistency, error handling with try-catch blocks and fallback mechanisms, and extensive logging for debugging and monitoring database operations.

lottie.js

Purpose: Lottie animation asset management module providing centralized Lottie JSON imports and configuration for smooth animations throughout the Gateway application.

Key Features: Lottie animation asset imports and management, centralized animation configuration, optimized animation loading and performance, React-lottie integration support, and animation asset organization by functionality or brand.

Implementation: ES6 module system for Lottie JSON imports, named exports for animation assets, configuration objects for animation properties, React-lottie component integration support, and performance optimization for animation loading and playback.

modello/

Purpose: Comprehensive model layer containing ES6 class definitions for data structures, Firebase Firestore converters, and business logic encapsulation for catalog management, session tracking, and application state modeling.

Key Features: ES6 class-based architecture with constructor initialization, Firebase Firestore integration with fromFirestore/toFirestore converters, comprehensive data validation and type checking, backward compatibility support for legacy data structures, mock data integration for development and testing, singleton pattern implementation for session management, and extensive data transformation and processing capabilities.

Implementation: Object-oriented programming with ES6 classes, Firebase Firestore document converters for seamless database integration, comprehensive constructor validation with optional chaining and fallback values, extensive toString() methods for debugging and logging, mock data exports for development environments, and complex business logic encapsulation for session analytics and user tracking.

BrandContent.js

Purpose: Brand content model class managing brand-specific content lists, media assets, and brand information with Firebase Firestore integration and mock data support for development environments.

Key Features: BrandContent class with constructor accepting doc and id parameters, contentList array management for brand content organization, nome_brand string property for brand identification, comprehensive toString() method for debugging with content mapping, brandContentConverter for Firebase Firestore integration, and extensive mock data exports (mockBrandData1-5) for various brands including POLAROID, CARRERA, HugoBoss, ARShades, and Tommy.

Implementation: ES6 class with constructor validation, Firebase Firestore converter pattern with toFirestore/fromFirestore methods, comprehensive mock data structure with descrizione arrays and media URLs, VIDEO_1 and IMAGE_2 imports from constants for asset management, and extensive content organization with support for multiple media types and brand-specific configurations.

Catalogue.js

Purpose: Catalog model class providing comprehensive catalog metadata management with 40+ properties for domain restrictions, app configurations, multi-language descriptions, and visual settings for Gateway catalog implementations.

Key Features: Comprehensive catalog property management (allowedDomain, appIdIos, appPackage, codePath, coverImage), multi-language description support (descriptionDe, descriptionEn, descriptionEs, descriptionFr, descriptionIt), visual configuration properties (featuredImage, glassesNumber, hdrEnvironment, layout), security and access control (isExpired, isIframeOnlyAcces, isLoginRequired, isPublic), technical settings (isSegmentationOn, lightIntensityExponent, skin, status), and backward compatibility aliases (nome_brand, url_logo, web_url).

Implementation: ES6 class with extensive constructor property assignment, comprehensive property mapping with fallback values using logical OR operators, Firebase Firestore converter integration, toString() method for debugging, backward compatibility support through property aliases, and extensive validation for required and optional catalog configurations.

CatalogueProduct.js

Purpose: Product model class managing eyewear product information with 35+ properties including multi-language descriptions, 3D model coefficients, tag management, and variant relationships for comprehensive product catalog management.

Key Features: Comprehensive product metadata (age, catalogRef, eanCode, glassesCode, modelName), multi-language description support (descriptionDe, descriptionEn, descriptionEs, descriptionFr, descriptionIt), 3D model positioning coefficients (glassesInclinationCoeff, glassesYCoeff, glassesZCoeff) with platform-specific variants (iOS/Android), extensive tag and variant management (list_line_tags, list_tags, list_variants), image and media URLs (imgUrl, thumbnail, urlImage, urlProduct, urlShadow), and backward compatibility aliases (codiceOcchiale, nome_modello, descrizione).

Implementation: ES6 class with comprehensive property assignment and validation, platform-specific coefficient support for iOS and Android AR positioning, array property initialization with fallback to empty arrays, isValidGlasses() validation method for variant checking, Firebase Firestore converter integration, toString() method for debugging, and extensive backward compatibility through property aliases for legacy data structures.

CatalogueVariant.js

Purpose: Variant model class managing individual eyewear variant information with 50+ properties including color specifications, 3D file URLs, image assets, and size information for detailed product variant management.

Key Features: Comprehensive variant identification (eanCode, upcCode, skuModel, variantCode, batch), extensive color management (frameColor, lensesColor, templeColor) with hexadecimal color support (primaryFrameColorHex, secondaryFrameColorHex), comprehensive 3D file management (urlGlobal, urlGlobalComplete, urlUsdz, urlUsdzComplete) with size variants, multiple image assets (poster, poster2, poster3, poster4, posterNoBackground), metadata and status tracking (loadingId, priority, modelPriority, status, lastUpdate), and backward compatibility aliases (coloreLenti, nomeOcchiale, codiceVariante).

Implementation: ES6 class with extensive property assignment and validation, comprehensive color mapping with primary and secondary color support, 3D file URL management with platform-specific formats (GLB, USDZ), image asset organization with multiple poster variants, getR06ImageUrl() helper method for thumbnail processing, size information management with nested object support, Firebase Firestore converter integration, toString() method for debugging, and extensive backward compatibility through property aliases.

GlassesContent.js

Purpose: Glasses content model class managing product-specific content lists, special content configurations, and glasses naming for detailed product information and media management.

Key Features: GlassesContent class with contentList array for organized content management, specialContent object for special configuration handling, glassesName string for product identification, comprehensive toString() method with content mapping for debugging, glassesContentConverter for Firebase Firestore integration, and extensive mock data exports (mockGlassesData1-3) for development and testing environments.

Implementation: ES6 class with constructor validation and property assignment, Firebase Firestore converter pattern with toFirestore/fromFirestore methods, comprehensive mock data structure with descrizione and media properties, special content type management with render support, and extensive content organization for product-specific information and media assets.

SessionGateway.js

Purpose: Comprehensive session management singleton class with 1170+ lines providing analytics tracking, dual geolocation services, Firebase integration, and user interaction monitoring for complete Gateway session lifecycle management.

Key Features: Singleton pattern implementation for global session management, comprehensive analytics tracking (page views, interaction events, scroll percentages), dual geolocation system with GPS/browser positioning and IP-based fallback, Firebase Firestore integration for session persistence, localStorage integration for offline capabilities, comprehensive user interaction tracking (3D interactions, shop clicks, snapshots), idle timeout management with automatic session termination, device detection and browser fingerprinting, catalog and brand configuration management, and extensive error handling with fallback mechanisms.

Geolocation Methods:

• GPS/Browser Method (getNearestCity): Uses navigator.geolocation for precise coordinates, queries Firebase cities collection with geofire-common for nearest city detection within 50km radius
• IP-based Method (getGeoLocationId): Fallback using api.ipify.org and custom Cloud Function for geographic estimation when permissions denied

Implementation: Singleton class with static instance management, intelligent geolocation decision logic based on permission state, Firebase Firestore session document management with real-time updates, extensive event tracking with increment methods for user actions, page analytics with time-based tracking, coordinate validation and caching with localStorage persistence, beforeunload event handling for session cleanup, comprehensive error handling with try-catch blocks, and device/browser detection for analytics segmentation.

Tag.js

Purpose: Simple tag model class managing catalog tags with group organization, ordering, and type classification for product categorization and filtering functionality.

Key Features: Tag class with basic property management (catalogRef, group, groupOrder, name, type), optional property handling with null fallbacks and existence checking, toString() method for debugging with group and name display, and tagConverter for Firebase Firestore integration with standard converter pattern.

Implementation: ES6 class with constructor validation using optional chaining and null coalescing, comprehensive property assignment with fallback handling, Firebase Firestore converter integration with toFirestore/fromFirestore methods, and simple string representation for debugging and logging purposes.

TakeFotoTemplate.js

Purpose: Photo template configuration class managing watermark settings, background properties, and image processing parameters for AR photo capture with brand-specific customization and responsive sizing.

Key Features: Comprehensive watermark management (bb_watermark_img, bt_watermark_img) with Image object integration, background configuration (bb_background_color, bt_background_color) with transparency support, responsive sizing calculations based on device type (isDesktop detection), position management for multiple watermarks (CenterTop, CenterBottom, TopRight, BottomLeft), extensive image loading with crossOrigin support for CORS handling, and comprehensive template validation with areWatermarksLoaded() method.

Implementation: ES6 class with device detection using window.innerWidth for responsive calculations, Image object creation with crossOrigin and src property management, comprehensive size calculations with base size multiplication and scaling factors, Firebase Storage integration for watermark image URLs with fallback defaults, templateConverter for Firebase Firestore integration, extensive property validation with default value fallbacks, and comprehensive watermark positioning system for flexible template customization.

pages/

Purpose: Main application pages containing the core user interface components for the Gateway application, including the homepage with navigation management, VTO experience implementation, and modal dialog systems for seamless user interaction.

Key Features: React Router integration for navigation management, comprehensive state management with React Context API, responsive design with mobile and desktop optimizations, real-time analytics tracking with SessionGateway integration, advanced camera and AR functionality with face mesh detection, multi-template support for different brand experiences, and extensive error handling with graceful fallbacks.

Implementation: React functional components with hooks (useState, useEffect, useContext, useRef), React Router for dynamic routing and navigation, comprehensive props management and component communication, responsive UI patterns with device detection, real-time data synchronization with Firebase integration, and modular component architecture for maintainable code structure.

HomePage.js

Purpose: Main application controller and router managing the entire Gateway user experience with 924+ lines of comprehensive navigation, state management, analytics tracking, and responsive UI orchestration for multi-page user flows.

Key Features: Comprehensive page routing system with PAGES constant management (HOME, BRAND_PAGE, SINGLE_BRAND_PAGE, SINGLE_GLASSES_PAGE, FILTER_BY_GENDER, FILTER_BY_SHAPE, FILTER_BY_TYPE, GLASSES_LIST, STORE_LOCATOR, VTO, THE_ICONS), advanced state management with 50+ useState hooks for user interface control, React Router integration with useNavigate and useSearchParams for dynamic routing, SessionGateway integration for real-time analytics and session tracking, responsive design with mobile phone detection and orientation warnings, comprehensive filtering system (gender, shape, type) with dynamic list management, password protection system with modal authentication and localStorage persistence, device detection algorithms (isMobilePhone function) with tablet and mobile phone differentiation, comprehensive navigation handling with back button logic and breadcrumb management, CatalogDataContext integration for global state management, comprehensive useEffect management for lifecycle events and data synchronization, responsive orientation detection with window resize listeners, extensive event handling for user interactions (clicks, navigation, filtering), comprehensive error handling with fallback mechanisms and graceful degradation, real-time page analytics with SessionGateway tracking for each page transition, VTO integration with modal management and transition animations, and multi-template support with GATEWAY_STRUCTURE configuration.

Implementation: React functional component with comprehensive hook usage (useState, useEffect, useContext, useNavigate, useSearchParams), extensive state management with 50+ state variables for UI control, SessionGateway singleton integration for analytics tracking, comprehensive event handling with optimized callback functions, responsive design patterns with CSS class management, extensive component composition with conditional rendering, React Router integration for dynamic page navigation, comprehensive prop drilling and state lifting patterns, and extensive error boundary implementation with graceful fallbacks.

MirrorVto.js

Purpose: Advanced Virtual Try-On implementation with 971+ lines providing comprehensive AR experience including face mesh detection, 3D model rendering, photo capture, template management, and real-time user interaction for immersive eyewear visualization.

Key Features: MediaPipe Face Mesh integration for real-time face detection with faceMeshSingleton management, Webcam integration with react-webcam for camera access and video streaming, comprehensive 3D rendering with EffectRenderer for AR glasses overlay and WebGL-based rendering with model loading and positioning, advanced photo capture system with countdown timer and template-based image processing, multi-template support (Vanilla 1, Vanilla 2) with different UI layouts and component configurations, comprehensive size and variant management with dynamic color selection, advanced slider controls for 3D model adjustment with vertex buffer manipulation, SessionGateway integration for VTO analytics tracking and page-specific analytics, responsive design with mobile and desktop camera constraints, extensive state management with 40+ useState hooks for UI control, comprehensive face detection pipeline with animation frame management, advanced camera handling with video constraints and device detection, TakeFotoTemplate integration for photo capture with watermark and background processing, advanced animation system with clip-on simulation and button state management, real-time analytics tracking with user interaction monitoring, extensive error handling with face detection fallbacks and camera access management, comprehensive cleanup patterns with useRef and component unmounting, and multi-brand support with dynamic configuration loading.

Implementation: React functional component with extensive hook management (useState, useEffect, useRef, useContext), MediaPipe Face Mesh integration with singleton pattern for performance optimization, Webcam component integration with video constraints and streaming management, EffectRenderer class integration for 3D rendering and AR functionality, comprehensive state management with complex object handling and array manipulation, extensive useEffect patterns for lifecycle management and cleanup, real-time animation frame management with requestAnimationFrame optimization, comprehensive error handling with try-catch blocks and graceful degradation, advanced template-based rendering with conditional component composition, and extensive prop management with deep object and array handling.

ModalVto.js

Purpose: Simple modal wrapper component providing overlay functionality for VTO experience with clean UI patterns and event handling for seamless user interaction management.

Key Features: Modal overlay system with CSS class-based styling (modal-overlay-vto, modal-content-vto), conditional rendering based on isOpen prop for performance optimization, close button integration with × symbol for intuitive user interaction, children prop support for flexible content composition, and clean component architecture with minimal state management.

Implementation: React functional component with simple prop handling (isOpen, onClose, children), conditional rendering pattern with early return for performance, CSS class-based styling for modal overlay and content container, event handling with onClick integration for close functionality, and clean component composition with children prop forwarding for flexible content management.

policies/

Purpose: Legal documentation and policy management system containing privacy policies, terms and conditions, and compliance-related content for GDPR adherence, user consent management, and regulatory compliance across different jurisdictions.

Key Features: Comprehensive privacy policy management with GDPR compliance requirements, terms and conditions documentation with multi-jurisdictional support, user consent management integration with application components, legal compliance framework for data protection and user rights, multi-language support for international deployments, version control for policy updates and historical tracking, and seamless integration with ConsentManager component for user acceptance workflows.

Implementation: Structured folder organization with privacy/ and terms/ subdirectories for content separation, document versioning system for legal compliance tracking, integration patterns with React components for dynamic policy display, multi-language content management for international compliance, and comprehensive content delivery system for web and mobile platforms.

policies/privacy/

Purpose: Privacy policy documentation and compliance management containing comprehensive data protection policies, GDPR compliance documentation, user rights information, and data processing disclosure for transparent user privacy management.

Key Features: Comprehensive GDPR compliance documentation, detailed data processing descriptions, user consent management integration, transparent privacy practices disclosure, multi-jurisdictional compliance support, and automated compliance workflows.

Implementation: Structured privacy policy documents with legal compliance formatting, version control system for policy updates and change tracking, integration with React components for dynamic policy display, multi-language support for international users, automated compliance workflows for data subject requests, and comprehensive documentation linking with application functionality for transparent data practices.

policies/terms/

Purpose: Terms and conditions documentation providing comprehensive legal framework for application usage, user responsibilities, service limitations, and contractual agreements for Gateway platform utilization.

Key Features: Comprehensive terms of service documentation, service usage guidelines, intellectual property protection, liability limitations, dispute resolution procedures, and account management policies.

Implementation: Structured legal documentation with clear sectioning and numbering, version control for terms updates and historical tracking, integration with user onboarding and registration processes, multi-jurisdictional legal compliance with localized terms variations, automated acceptance tracking with user consent management, and comprehensive legal framework integration with application business logic and user management systems.

Utils/

Purpose: Comprehensive utility functions and helper modules providing core application functionality including cookie management, internationalization, VTO processing, language support, and specialized algorithms for AR experience optimization.

Key Features: Cookie and localStorage management with GDPR compliance, comprehensive internationalization system with i18next integration, advanced VTO utilities with Three.js rendering and MediaPipe face detection, utility functions for Firebase integration and image processing, specialized algorithms for AR positioning and face tracking optimization, language detection and switching capabilities, and comprehensive helper functions for application-wide functionality.

Implementation: Modular utility architecture with specialized folders for different functionalities, ES6 module system with named exports, comprehensive error handling and fallback mechanisms, performance-optimized algorithms for real-time processing, integration patterns with React components and external libraries, and extensive documentation with JSDoc comments for developer reference.

Utils/LanguageUtils/

Internationalization and language management system with i18next configuration.

i18n.js

Purpose: Core internationalization configuration module with 36 lines providing i18next setup, language detection, cookie consent integration, and comprehensive multi-language support for the Gateway application.

Key Features: i18next configuration with HttpApi backend for dynamic language file loading, LanguageDetector integration with consent-aware cookie management, conditional detection order based on cookie consent status (includes/excludes 'cookie' based on consent), fallback language configuration (defaulting to English), comprehensive cookie configuration with secure options (path: '/', sameSite: 'strict'), dynamic language loading from locales directory with namespace support, and initReactI18next integration for React component integration.

Implementation: ES6 module with i18next imports and configuration, cookie consent checking using Cookies.get('consent') === 'true', conditional detection configuration with consent-based cookie inclusion/exclusion, comprehensive backend configuration with loadPath for dynamic language loading, secure cookie options with path and sameSite configurations, and modular plugin integration with HttpApi, LanguageDetector, and initReactI18next for complete internationalization support.

Utils/vto-utils/

Advanced Virtual Try-On utilities with Three.js rendering engine and MediaPipe face detection.

EffectRenderer.js

Purpose: Advanced Three.js-based AR rendering engine with 504+ lines providing comprehensive 3D model loading, face tracking integration, animation system, photo capture, and real-time WebGL rendering for immersive eyewear visualization.

Key Features: Comprehensive Three.js scene management with WebGL renderer configuration (alpha, antialias, precision: "highp", logarithmicDepthBuffer, stencilBuffer, preserveDrawingBuffer) optimized for AR performance, GLTFLoader integration for 3D model loading with canonical face mesh and eyewear models, RGBELoader integration for HDR environment mapping and realistic lighting, advanced animation system with THREE.AnimationMixer for clip-on animations with forward/reverse playback and event handling, real-time face tracking with MediaPipe integration and OneEuroFilter for smooth positioning, comprehensive photo capture system with canvas manipulation and template-based watermarking, dynamic model positioning with coefficient-based adjustments for different face anchor points, comprehensive material system with THREE.MeshPhysicalMaterial for realistic rendering, extensive error handling with model loading retries and graceful degradation, comprehensive 3D model management with dispose patterns for memory optimization, advanced lighting system with HemisphereLight and environment mapping, real-time face geometry processing with vertex buffer manipulation, dynamic camera positioning with perspective projection and aspect ratio management, comprehensive texture management with CanvasTexture and encoding optimization, and extensive mathematical calculations for AR positioning using face landmark coordinates.

Implementation: ES6 class with comprehensive constructor initialization and method organization, Three.js integration with scene, renderer, camera, and lighting management, GLTFLoader and RGBELoader integration for asset loading, comprehensive error handling with try-catch blocks and retry mechanisms, memory management with dispose patterns for 3D objects and materials, real-time rendering loop with requestAnimationFrame optimization, advanced mathematical calculations for face tracking and model positioning, and extensive property management with getter/setter patterns for configuration.

FaceMeshSingleton.js

Purpose: MediaPipe Face Mesh singleton implementation with 59 lines providing efficient face detection resource management, initialization callbacks, and performance optimization for AR face tracking.

Key Features: Singleton pattern implementation for MediaPipe Face Mesh resource optimization, comprehensive face detection configuration (selfieMode: false, enableFaceGeometry: true, smoothLandmarks: true, maxNumFaces: 1, refineLandmarks: false), initialization callback system for asynchronous loading management, global MediaPipe integration using window.FaceMesh for script-based loading, comprehensive error handling with try-catch blocks for face mesh operations, and resource cleanup with reset functionality for proper disposal.

Implementation: ES6 class with singleton pattern implementation using static instance management, MediaPipe Face Mesh integration with comprehensive configuration options, callback queue management for initialization events, asynchronous initialization with Promise-based loading, comprehensive error handling for face mesh operations, and proper resource cleanup with reset and disposal methods.

imageUtils.js

Purpose: Image processing utilities with 33 lines providing watermark positioning, banner drawing, and template-based image manipulation for AR photo capture functionality.

Key Features: Comprehensive watermark positioning system with support for multiple positions (BottomLeft, TopLeft, BottomRight, TopRight, CenterBottom, CenterTop), dynamic banner drawing with background color and transparency support, responsive watermark sizing with center and general size configurations, Canvas API integration for image manipulation and drawing operations, comprehensive position calculation algorithms for precise watermark placement, and template-based image processing with fotoTemplate integration.

Implementation: ES6 module with named export functions, Canvas API integration for drawing operations, comprehensive mathematical calculations for positioning and sizing, template-based configuration with prefix support for different watermark types, responsive sizing calculations based on image dimensions and template settings, and modular function architecture for reusable image processing operations.

OneEuroFilter.js

Purpose: Advanced signal filtering algorithm with 54 lines implementing One Euro Filter for smooth face tracking, noise reduction, and real-time position smoothing in AR applications.

Key Features: One Euro Filter algorithm implementation with configurable parameters (minCutOff, beta, dCutOff), real-time signal smoothing for face tracking coordinates, noise reduction with adaptive cutoff frequency calculation, comprehensive state management with previous values tracking, initialization handling for first-time filtering, and mathematical filtering functions with exponential smoothing.

Implementation: ES6 class with constructor parameter configuration, comprehensive state management with xPrev, dxPrev, tPrev tracking, mathematical filtering algorithms with smoothing factor calculation, adaptive cutoff frequency calculation based on signal velocity, exponential smoothing implementation for signal processing, and reset functionality for filter state reinitialization.

cookiesUtilities.js

Purpose: Cookie and localStorage management utilities with 63 lines providing GDPR-compliant consent management, visitor tracking, and comprehensive data storage with fallback mechanisms.

Key Features: Comprehensive consent checking with cookie and localStorage fallback mechanisms, visitor status tracking with persistent storage across sessions, consent management with 90-day cookie expiration and path configuration, comprehensive revoke functionality with complete data cleanup, dual storage approach using both cookies and localStorage for reliability, and automatic page reload functionality for consent state changes.

Implementation: ES6 module with named export functions, js-cookie library integration for cookie management, comprehensive localStorage fallback mechanisms, extensive data cleanup with multiple storage location clearing, automatic expiration management with 90-day cookie persistence, and comprehensive error handling for storage operations.

function.js

Purpose: General utility functions with 39 lines providing React i18next integration, Firebase Storage upload functionality, and Base64 image processing for comprehensive application support.

Key Features: useTranslateText custom hook for React i18next integration, Firebase Storage integration with uploadBase64 function for image upload functionality, Base64 image processing with prefix removal and Uint8Array conversion, random ID generation for unique file naming, comprehensive error handling with try-catch blocks for upload operations, and modular function architecture with named exports.

Implementation: React custom hook implementation with useTranslation integration, Firebase Storage SDK integration with getStorage, ref, uploadBytes, and getDownloadURL functions, Base64 processing with string manipulation and binary conversion, comprehensive error handling with console logging and error propagation, and ES6 module system with named exports for utility functions.

Root Files (src/)

App.js

Purpose: Main application entry point with 206 lines providing comprehensive routing, catalog management, consent handling, Google Maps integration, and privacy policy management for the entire Gateway application.

Key Features: React Router integration with BrowserRouter for client-side routing, comprehensive catalog management with dynamic BRAND_CONFIG routing based on URL parameters, Google Maps LoadScript integration with Places API for store locator functionality, comprehensive consent management with ConsentManager integration and cookie utilities, dynamic document title management based on selected catalog/brand, privacy policy modal system with PermissionAndPolicy component integration, language detection and switching with i18next integration, comprehensive error handling with fallback mechanisms, status bar management for mobile optimization, CatalogDataProvider integration for global state management with dynamic catalog selection, comprehensive routing system with RedirectToQuery component for URL parameter management, consent status tracking with checkStoredConsent and event-driven updates, language detection with cookie, i18next, and browser fallback mechanisms, dynamic component rendering based on view parameters (VTO vs normal view), comprehensive event handling for homepage detection and consent updates, Google Maps API integration with proper loading states, and privacy policy overlay system with modal management.

Implementation: React functional component with comprehensive hook usage (useState, useEffect), React Router integration with Routes, Route, and navigation hooks, comprehensive state management with multiple useState hooks for UI control, CatalogDataProvider wrapper for context-based data management, Google Maps LoadScript integration with API key and libraries configuration, extensive event handling with addEventListener and cleanup patterns, comprehensive error handling with fallback routing and default catalog management, and dynamic component composition with conditional rendering patterns.

index.js

Purpose: React application bootstrap with 16 lines providing ReactDOM root creation, service worker registration, and web vitals reporting for application initialization and performance monitoring.

Key Features: ReactDOM 18 createRoot API integration for modern React rendering, React.StrictMode wrapper for development debugging and future compatibility, CSS import management for global styling (main.css), service worker registration for offline functionality and caching, web vitals reporting for performance monitoring and optimization, and comprehensive application bootstrapping with proper initialization sequence.

Implementation: ReactDOM createRoot API usage with getElementById('root') targeting, React.StrictMode wrapper for enhanced development experience, CSS import for global styling application, service worker unregistration for current deployment strategy, and reportWebVitals integration for performance metrics collection.

reportWebVitals.js

Purpose: Web performance monitoring utility with 12 lines implementing Google's web-vitals library integration for Core Web Vitals measurement and performance optimization tracking.

Key Features: Comprehensive Core Web Vitals measurement including CLS (Cumulative Layout Shift), FID (First Input Delay), FCP (First Contentful Paint), LCP (Largest Contentful Paint), and TTFB (Time to First Byte), dynamic web-vitals library import for performance optimization, callback-based performance entry handling, and comprehensive performance monitoring for user experience optimization.

Implementation: ES6 module with default export function, dynamic import for web-vitals library to avoid bundle size impact, comprehensive performance metric collection with all Core Web Vitals, callback-based architecture for flexible performance data handling, and conditional loading based on onPerfEntry function validation.

RouterQuery.js

Purpose: Simple routing wrapper with 6 lines providing HomePage component integration and route management for the main application flow.

Key Features: Clean component composition with HomePage import and rendering, simple routing wrapper for main application pages, minimal overhead with direct component rendering, and clear separation of concerns between routing and page components.

Implementation: ES6 module with named imports, functional component with direct JSX return, clean component composition without additional props or state management, and simple export pattern for router integration.

service-worker.js

Purpose: Progressive Web App service worker with 44 lines implementing Workbox-based caching strategies, offline functionality, and resource management for enhanced user experience and performance optimization.

Key Features: Workbox integration with clientsClaim for immediate service worker activation, comprehensive precaching with precacheAndRoute for static assets, intelligent navigation routing with createHandlerBoundToURL for SPA support, image caching strategy with StaleWhileRevalidate for optimal performance, expiration management with ExpirationPlugin for cache size control, message handling for service worker lifecycle management, file extension-based routing exclusion for proper SPA navigation, comprehensive cache management with workbox-strategies integration, origin-based caching for same-origin resources, PNG image-specific caching with expiration policies, SKIP_WAITING message handling for service worker updates, and comprehensive routing logic with request mode and pathname filtering.

Implementation: Workbox library integration with multiple modules (workbox-core, workbox-expiration, workbox-precaching, workbox-routing, workbox-strategies), comprehensive route registration with conditional logic, cache strategy implementation with StaleWhileRevalidate pattern, expiration plugin configuration with maxEntries limitations, and event listener implementation for service worker communication.

serviceWorkerRegistration.js

Purpose: Service worker registration and lifecycle management with 90 lines providing comprehensive PWA functionality, localhost detection, update handling, and production deployment support.

Key Features: Comprehensive localhost detection with multiple IP patterns (localhost, [::1], 127.x.x.x range), production-only service worker registration for optimal development experience, comprehensive update detection with onupdatefound event handling, installation state management with installingWorker.onstatechange monitoring, configuration-based callback support for update and success events, comprehensive error handling with console logging and graceful degradation, environment-based registration with NODE_ENV production checking, PUBLIC_URL validation for origin matching, comprehensive service worker validation with fetch-based checking, content-type validation for JavaScript service workers, registration unregistration and page reload for invalid service workers, and comprehensive error handling for network failures and invalid responses.

Implementation: ES6 module with named export functions (register, unregister), comprehensive localhost detection with regex pattern matching, service worker API integration with navigator.serviceWorker, Promise-based registration handling with then/catch patterns, comprehensive event handling for service worker lifecycle events, and extensive error handling with try-catch blocks and fallback mechanisms.