Routes / Navigation

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

This document describes all web routes and navigation patterns for the ARS Gateway application.

Route Overview

The Gateway application uses a catalog ID-based routing system to manage different brand experiences and multi-catalog configurations.

Path / Route Name	Component / Page	Parameters	Description
/	App.js	None	Main homepage - Automatic redirect to the default catalog configured in DEFAULT_CATALOG_ID.
/:catalogId	App.js	catalogId (string)	Specific catalog route - Loads the brand experience corresponding to the provided catalog ID.

Catalog Configuration

Supported Catalog IDs

Catalogs are centrally configured in the config.js file. The Gateway supports two main brands:

Tommy Hilfiger Gateway

export const DEFAULT_CATALOG_ID = "A8wt689wvBpISxq4Ul0m";

export const CATALOG_IDS = {
  TOMMY: "A8wt689wvBpISxq4Ul0m",
  TOMMY_ROADTOUR: "b6M6qXvlqkxuWT9cVMAH",
  TOMMY_OOH: "ciDVQZMbol2IyhYIIkm6",
  TOMMY_ADV: "OFkyzgXGKGGycrCCp1sh",
};

David Beckham Gateway

export const DEFAULT_CATALOG_ID = "vKdbq9QtYNfjmnPFxvC4";

export const CATALOG_IDS = {
  DAVID_BECKHAM: "vKdbq9QtYNfjmnPFxvC4",
  DAVID_BECKHAM_OOH: "wZuUP3n9L1XfgrvL5axr",
};

Brand Configuration

Each catalog has an associated brand configuration for titles and mapping:

Tommy Hilfiger Brand Config

export const BRAND_CONFIG = {
  [CATALOG_IDS.TOMMY]: {
    title: "Tommy Experience",
    catalog: [CATALOG_IDS.TOMMY],
  },
  [CATALOG_IDS.TOMMY_ROADTOUR]: {
    title: "Tommy Experience ROADTOUR",
    catalog: [CATALOG_IDS.TOMMY_ROADTOUR],
  },
  [CATALOG_IDS.TOMMY_OOH]: {
    title: "Tommy Experience OOH",
    catalog: [CATALOG_IDS.TOMMY_OOH],
  },
  [CATALOG_IDS.TOMMY_ADV]: {
    title: "Tommy Experience ADV",
    catalog: [CATALOG_IDS.TOMMY_ADV],
  },
};

David Beckham Brand Config

export const BRAND_CONFIG = {
  [CATALOG_IDS.DAVID_BECKHAM]: {
    title: "David Beckham",
    catalog: [CATALOG_IDS.DAVID_BECKHAM],
  },
  [CATALOG_IDS.DAVID_BECKHAM_OOH]: {
    title: "David Beckham OOH",
    catalog: [CATALOG_IDS.DAVID_BECKHAM_OOH],
  },
};

Data Flow from Catalog

The Gateway system uses the catalog ID to retrieve all necessary data through a chain of Firestore references:

1. Catalog Retrieval

The catalog ID in the URL directly references the Catalogues collection:

const catalogRef = doc(db, "Catalogues", catalogId);
const catalogData = await getDoc(catalogRef);

2. Products Retrieval

All products are retrieved by filtering for catalogRef:

const productsRef = collection(db, "CataloguesProducts");
const q = query(productsRef, where("catalogRef", "==", catalogId));
const productsSnapshot = await getDocs(q);

3. Variants Retrieval

For each product, variants are retrieved from the list_variants list:

// For each CataloguesProduct
const variantsList = await fetchVariantsForProduct(productData.list_variants);

// Where list_variants contains the IDs of CataloguesVariants
const variantRef = doc(db, "CataloguesVariants", variantId);
const variantData = await getDoc(variantRef);

Route Detection Logic

The application determines which catalog to use based on the URL:

Catalog Detection

const catalogId = params.catalogId || DEFAULT_CATALOG_ID;
const brandConfig = BRAND_CONFIG[catalogId];

How it works:

1. If the user specifies a catalog ID in the URL (/:catalogId) → use that one
2. If the user accesses the homepage (/) → use the DEFAULT_CATALOG_ID
3. Retrieve the corresponding brand configuration from the catalog ID

Examples:

• URL: /A8wt689wvBpISxq4Ul0m → Tommy Hilfiger catalog
• URL: /vKdbq9QtYNfjmnPFxvC4 → David Beckham catalog
• URL: / → default catalog (Tommy Hilfiger or David Beckham)