'use client'; import { useState, useEffect, useRef } from 'react'; import Image from 'next/image'; import { useAuthStore } from '@/store/authStore'; import axios from 'axios'; import LivePreview from './LivePreview'; import waylowLogo from '@/public/waylow-logo.png'; const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'; const WS_URL = process.env.NEXT_PUBLIC_WS_URL || 'ws://localhost:3000'; interface PriceEndpoint { label: string; apiUrl: string; devOnly?: boolean; } const PRICE_ENDPOINTS: PriceEndpoint[] = [ { label: 'Local', apiUrl: 'http://localhost:3000', devOnly: true }, { label: 'waylow.world', apiUrl: 'https://waylow.world' }, { label: 'US', apiUrl: 'https://us.waylow.world' }, // To add a new location, just add a line here ]; const isDev = API_URL.includes('localhost'); const activeEndpoints = PRICE_ENDPOINTS.filter(ep => !ep.devOnly || isDev); interface PriceResult { label: string; apiUrl: string; sessionId: string | null; sessionToken: string | null; data: { provider?: string; desktop: { price: string; currency: string; description: string }; mobile: { price: string; currency: string; description: string }; reserveUrl: string; traffic?: { totalBytes: number; requestCount: number }; } | null; loading: boolean; error: string | null; } type DeviceMode = 'desktop' | 'mobile'; interface Country { code: string; name: string; flag: string; } const COUNTRIES: Country[] = [ { code: 'AFG', name: 'Afghanistan', flag: '๐Ÿ‡ฆ๐Ÿ‡ซ' }, { code: 'ALB', name: 'Albania', flag: '๐Ÿ‡ฆ๐Ÿ‡ฑ' }, { code: 'DZA', name: 'Algeria', flag: '๐Ÿ‡ฉ๐Ÿ‡ฟ' }, { code: 'AND', name: 'Andorra', flag: '๐Ÿ‡ฆ๐Ÿ‡ฉ' }, { code: 'AGO', name: 'Angola', flag: '๐Ÿ‡ฆ๐Ÿ‡ด' }, { code: 'ATG', name: 'Antigua and Barbuda', flag: '๐Ÿ‡ฆ๐Ÿ‡ฌ' }, { code: 'ARG', name: 'Argentina', flag: '๐Ÿ‡ฆ๐Ÿ‡ท' }, { code: 'ARM', name: 'Armenia', flag: '๐Ÿ‡ฆ๐Ÿ‡ฒ' }, { code: 'AUS', name: 'Australia', flag: '๐Ÿ‡ฆ๐Ÿ‡บ' }, { code: 'AUT', name: 'Austria', flag: '๐Ÿ‡ฆ๐Ÿ‡น' }, { code: 'AZE', name: 'Azerbaijan', flag: '๐Ÿ‡ฆ๐Ÿ‡ฟ' }, { code: 'BHS', name: 'Bahamas', flag: '๐Ÿ‡ง๐Ÿ‡ธ' }, { code: 'BHR', name: 'Bahrain', flag: '๐Ÿ‡ง๐Ÿ‡ญ' }, { code: 'BGD', name: 'Bangladesh', flag: '๐Ÿ‡ง๐Ÿ‡ฉ' }, { code: 'BRB', name: 'Barbados', flag: '๐Ÿ‡ง๐Ÿ‡ง' }, { code: 'BLR', name: 'Belarus', flag: '๐Ÿ‡ง๐Ÿ‡พ' }, { code: 'BEL', name: 'Belgium', flag: '๐Ÿ‡ง๐Ÿ‡ช' }, { code: 'BLZ', name: 'Belize', flag: '๐Ÿ‡ง๐Ÿ‡ฟ' }, { code: 'BEN', name: 'Benin', flag: '๐Ÿ‡ง๐Ÿ‡ฏ' }, { code: 'BTN', name: 'Bhutan', flag: '๐Ÿ‡ง๐Ÿ‡น' }, { code: 'BOL', name: 'Bolivia', flag: '๐Ÿ‡ง๐Ÿ‡ด' }, { code: 'BIH', name: 'Bosnia and Herzegovina', flag: '๐Ÿ‡ง๐Ÿ‡ฆ' }, { code: 'BWA', name: 'Botswana', flag: '๐Ÿ‡ง๐Ÿ‡ผ' }, { code: 'BRA', name: 'Brazil', flag: '๐Ÿ‡ง๐Ÿ‡ท' }, { code: 'BRN', name: 'Brunei', flag: '๐Ÿ‡ง๐Ÿ‡ณ' }, { code: 'BGR', name: 'Bulgaria', flag: '๐Ÿ‡ง๐Ÿ‡ฌ' }, { code: 'BFA', name: 'Burkina Faso', flag: '๐Ÿ‡ง๐Ÿ‡ซ' }, { code: 'BDI', name: 'Burundi', flag: '๐Ÿ‡ง๐Ÿ‡ฎ' }, { code: 'CPV', name: 'Cabo Verde', flag: '๐Ÿ‡จ๐Ÿ‡ป' }, { code: 'KHM', name: 'Cambodia', flag: '๐Ÿ‡ฐ๐Ÿ‡ญ' }, { code: 'CMR', name: 'Cameroon', flag: '๐Ÿ‡จ๐Ÿ‡ฒ' }, { code: 'CAN', name: 'Canada', flag: '๐Ÿ‡จ๐Ÿ‡ฆ' }, { code: 'CAF', name: 'Central African Republic', flag: '๐Ÿ‡จ๐Ÿ‡ซ' }, { code: 'TCD', name: 'Chad', flag: '๐Ÿ‡น๐Ÿ‡ฉ' }, { code: 'CHL', name: 'Chile', flag: '๐Ÿ‡จ๐Ÿ‡ฑ' }, { code: 'CHN', name: 'China', flag: '๐Ÿ‡จ๐Ÿ‡ณ' }, { code: 'COL', name: 'Colombia', flag: '๐Ÿ‡จ๐Ÿ‡ด' }, { code: 'COM', name: 'Comoros', flag: '๐Ÿ‡ฐ๐Ÿ‡ฒ' }, { code: 'COG', name: 'Congo', flag: '๐Ÿ‡จ๐Ÿ‡ฌ' }, { code: 'COD', name: 'Congo (DRC)', flag: '๐Ÿ‡จ๐Ÿ‡ฉ' }, { code: 'CRI', name: 'Costa Rica', flag: '๐Ÿ‡จ๐Ÿ‡ท' }, { code: 'CIV', name: "Cรดte d'Ivoire", flag: '๐Ÿ‡จ๐Ÿ‡ฎ' }, { code: 'HRV', name: 'Croatia', flag: '๐Ÿ‡ญ๐Ÿ‡ท' }, { code: 'CUB', name: 'Cuba', flag: '๐Ÿ‡จ๐Ÿ‡บ' }, { code: 'CYP', name: 'Cyprus', flag: '๐Ÿ‡จ๐Ÿ‡พ' }, { code: 'CZE', name: 'Czechia', flag: '๐Ÿ‡จ๐Ÿ‡ฟ' }, { code: 'DNK', name: 'Denmark', flag: '๐Ÿ‡ฉ๐Ÿ‡ฐ' }, { code: 'DJI', name: 'Djibouti', flag: '๐Ÿ‡ฉ๐Ÿ‡ฏ' }, { code: 'DMA', name: 'Dominica', flag: '๐Ÿ‡ฉ๐Ÿ‡ฒ' }, { code: 'DOM', name: 'Dominican Republic', flag: '๐Ÿ‡ฉ๐Ÿ‡ด' }, { code: 'ECU', name: 'Ecuador', flag: '๐Ÿ‡ช๐Ÿ‡จ' }, { code: 'EGY', name: 'Egypt', flag: '๐Ÿ‡ช๐Ÿ‡ฌ' }, { code: 'SLV', name: 'El Salvador', flag: '๐Ÿ‡ธ๐Ÿ‡ป' }, { code: 'GNQ', name: 'Equatorial Guinea', flag: '๐Ÿ‡ฌ๐Ÿ‡ถ' }, { code: 'ERI', name: 'Eritrea', flag: '๐Ÿ‡ช๐Ÿ‡ท' }, { code: 'EST', name: 'Estonia', flag: '๐Ÿ‡ช๐Ÿ‡ช' }, { code: 'SWZ', name: 'Eswatini', flag: '๐Ÿ‡ธ๐Ÿ‡ฟ' }, { code: 'ETH', name: 'Ethiopia', flag: '๐Ÿ‡ช๐Ÿ‡น' }, { code: 'FJI', name: 'Fiji', flag: '๐Ÿ‡ซ๐Ÿ‡ฏ' }, { code: 'FIN', name: 'Finland', flag: '๐Ÿ‡ซ๐Ÿ‡ฎ' }, { code: 'FRA', name: 'France', flag: '๐Ÿ‡ซ๐Ÿ‡ท' }, { code: 'GAB', name: 'Gabon', flag: '๐Ÿ‡ฌ๐Ÿ‡ฆ' }, { code: 'GMB', name: 'Gambia', flag: '๐Ÿ‡ฌ๐Ÿ‡ฒ' }, { code: 'GEO', name: 'Georgia', flag: '๐Ÿ‡ฌ๐Ÿ‡ช' }, { code: 'DEU', name: 'Germany', flag: '๐Ÿ‡ฉ๐Ÿ‡ช' }, { code: 'GHA', name: 'Ghana', flag: '๐Ÿ‡ฌ๐Ÿ‡ญ' }, { code: 'GRC', name: 'Greece', flag: '๐Ÿ‡ฌ๐Ÿ‡ท' }, { code: 'GRD', name: 'Grenada', flag: '๐Ÿ‡ฌ๐Ÿ‡ฉ' }, { code: 'GTM', name: 'Guatemala', flag: '๐Ÿ‡ฌ๐Ÿ‡น' }, { code: 'GIN', name: 'Guinea', flag: '๐Ÿ‡ฌ๐Ÿ‡ณ' }, { code: 'GNB', name: 'Guinea-Bissau', flag: '๐Ÿ‡ฌ๐Ÿ‡ผ' }, { code: 'GUY', name: 'Guyana', flag: '๐Ÿ‡ฌ๐Ÿ‡พ' }, { code: 'HTI', name: 'Haiti', flag: '๐Ÿ‡ญ๐Ÿ‡น' }, { code: 'HND', name: 'Honduras', flag: '๐Ÿ‡ญ๐Ÿ‡ณ' }, { code: 'HUN', name: 'Hungary', flag: '๐Ÿ‡ญ๐Ÿ‡บ' }, { code: 'ISL', name: 'Iceland', flag: '๐Ÿ‡ฎ๐Ÿ‡ธ' }, { code: 'IND', name: 'India', flag: '๐Ÿ‡ฎ๐Ÿ‡ณ' }, { code: 'IDN', name: 'Indonesia', flag: '๐Ÿ‡ฎ๐Ÿ‡ฉ' }, { code: 'IRN', name: 'Iran', flag: '๐Ÿ‡ฎ๐Ÿ‡ท' }, { code: 'IRQ', name: 'Iraq', flag: '๐Ÿ‡ฎ๐Ÿ‡ถ' }, { code: 'IRL', name: 'Ireland', flag: '๐Ÿ‡ฎ๐Ÿ‡ช' }, { code: 'ISR', name: 'Israel', flag: '๐Ÿ‡ฎ๐Ÿ‡ฑ' }, { code: 'ITA', name: 'Italy', flag: '๐Ÿ‡ฎ๐Ÿ‡น' }, { code: 'JAM', name: 'Jamaica', flag: '๐Ÿ‡ฏ๐Ÿ‡ฒ' }, { code: 'JPN', name: 'Japan', flag: '๐Ÿ‡ฏ๐Ÿ‡ต' }, { code: 'JOR', name: 'Jordan', flag: '๐Ÿ‡ฏ๐Ÿ‡ด' }, { code: 'KAZ', name: 'Kazakhstan', flag: '๐Ÿ‡ฐ๐Ÿ‡ฟ' }, { code: 'KEN', name: 'Kenya', flag: '๐Ÿ‡ฐ๐Ÿ‡ช' }, { code: 'KIR', name: 'Kiribati', flag: '๐Ÿ‡ฐ๐Ÿ‡ฎ' }, { code: 'PRK', name: 'North Korea', flag: '๐Ÿ‡ฐ๐Ÿ‡ต' }, { code: 'KOR', name: 'South Korea', flag: '๐Ÿ‡ฐ๐Ÿ‡ท' }, { code: 'KWT', name: 'Kuwait', flag: '๐Ÿ‡ฐ๐Ÿ‡ผ' }, { code: 'KGZ', name: 'Kyrgyzstan', flag: '๐Ÿ‡ฐ๐Ÿ‡ฌ' }, { code: 'LAO', name: 'Laos', flag: '๐Ÿ‡ฑ๐Ÿ‡ฆ' }, { code: 'LVA', name: 'Latvia', flag: '๐Ÿ‡ฑ๐Ÿ‡ป' }, { code: 'LBN', name: 'Lebanon', flag: '๐Ÿ‡ฑ๐Ÿ‡ง' }, { code: 'LSO', name: 'Lesotho', flag: '๐Ÿ‡ฑ๐Ÿ‡ธ' }, { code: 'LBR', name: 'Liberia', flag: '๐Ÿ‡ฑ๐Ÿ‡ท' }, { code: 'LBY', name: 'Libya', flag: '๐Ÿ‡ฑ๐Ÿ‡พ' }, { code: 'LIE', name: 'Liechtenstein', flag: '๐Ÿ‡ฑ๐Ÿ‡ฎ' }, { code: 'LTU', name: 'Lithuania', flag: '๐Ÿ‡ฑ๐Ÿ‡น' }, { code: 'LUX', name: 'Luxembourg', flag: '๐Ÿ‡ฑ๐Ÿ‡บ' }, { code: 'MDG', name: 'Madagascar', flag: '๐Ÿ‡ฒ๐Ÿ‡ฌ' }, { code: 'MWI', name: 'Malawi', flag: '๐Ÿ‡ฒ๐Ÿ‡ผ' }, { code: 'MYS', name: 'Malaysia', flag: '๐Ÿ‡ฒ๐Ÿ‡พ' }, { code: 'MDV', name: 'Maldives', flag: '๐Ÿ‡ฒ๐Ÿ‡ป' }, { code: 'MLI', name: 'Mali', flag: '๐Ÿ‡ฒ๐Ÿ‡ฑ' }, { code: 'MLT', name: 'Malta', flag: '๐Ÿ‡ฒ๐Ÿ‡น' }, { code: 'MHL', name: 'Marshall Islands', flag: '๐Ÿ‡ฒ๐Ÿ‡ญ' }, { code: 'MRT', name: 'Mauritania', flag: '๐Ÿ‡ฒ๐Ÿ‡ท' }, { code: 'MUS', name: 'Mauritius', flag: '๐Ÿ‡ฒ๐Ÿ‡บ' }, { code: 'MEX', name: 'Mexico', flag: '๐Ÿ‡ฒ๐Ÿ‡ฝ' }, { code: 'FSM', name: 'Micronesia', flag: '๐Ÿ‡ซ๐Ÿ‡ฒ' }, { code: 'MDA', name: 'Moldova', flag: '๐Ÿ‡ฒ๐Ÿ‡ฉ' }, { code: 'MCO', name: 'Monaco', flag: '๐Ÿ‡ฒ๐Ÿ‡จ' }, { code: 'MNG', name: 'Mongolia', flag: '๐Ÿ‡ฒ๐Ÿ‡ณ' }, { code: 'MNE', name: 'Montenegro', flag: '๐Ÿ‡ฒ๐Ÿ‡ช' }, { code: 'MAR', name: 'Morocco', flag: '๐Ÿ‡ฒ๐Ÿ‡ฆ' }, { code: 'MOZ', name: 'Mozambique', flag: '๐Ÿ‡ฒ๐Ÿ‡ฟ' }, { code: 'MMR', name: 'Myanmar', flag: '๐Ÿ‡ฒ๐Ÿ‡ฒ' }, { code: 'NAM', name: 'Namibia', flag: '๐Ÿ‡ณ๐Ÿ‡ฆ' }, { code: 'NRU', name: 'Nauru', flag: '๐Ÿ‡ณ๐Ÿ‡ท' }, { code: 'NPL', name: 'Nepal', flag: '๐Ÿ‡ณ๐Ÿ‡ต' }, { code: 'NLD', name: 'Netherlands', flag: '๐Ÿ‡ณ๐Ÿ‡ฑ' }, { code: 'NZL', name: 'New Zealand', flag: '๐Ÿ‡ณ๐Ÿ‡ฟ' }, { code: 'NIC', name: 'Nicaragua', flag: '๐Ÿ‡ณ๐Ÿ‡ฎ' }, { code: 'NER', name: 'Niger', flag: '๐Ÿ‡ณ๐Ÿ‡ช' }, { code: 'NGA', name: 'Nigeria', flag: '๐Ÿ‡ณ๐Ÿ‡ฌ' }, { code: 'MKD', name: 'North Macedonia', flag: '๐Ÿ‡ฒ๐Ÿ‡ฐ' }, { code: 'NOR', name: 'Norway', flag: '๐Ÿ‡ณ๐Ÿ‡ด' }, { code: 'OMN', name: 'Oman', flag: '๐Ÿ‡ด๐Ÿ‡ฒ' }, { code: 'PAK', name: 'Pakistan', flag: '๐Ÿ‡ต๐Ÿ‡ฐ' }, { code: 'PLW', name: 'Palau', flag: '๐Ÿ‡ต๐Ÿ‡ผ' }, { code: 'PAN', name: 'Panama', flag: '๐Ÿ‡ต๐Ÿ‡ฆ' }, { code: 'PNG', name: 'Papua New Guinea', flag: '๐Ÿ‡ต๐Ÿ‡ฌ' }, { code: 'PRY', name: 'Paraguay', flag: '๐Ÿ‡ต๐Ÿ‡พ' }, { code: 'PER', name: 'Peru', flag: '๐Ÿ‡ต๐Ÿ‡ช' }, { code: 'PHL', name: 'Philippines', flag: '๐Ÿ‡ต๐Ÿ‡ญ' }, { code: 'POL', name: 'Poland', flag: '๐Ÿ‡ต๐Ÿ‡ฑ' }, { code: 'PRT', name: 'Portugal', flag: '๐Ÿ‡ต๐Ÿ‡น' }, { code: 'QAT', name: 'Qatar', flag: '๐Ÿ‡ถ๐Ÿ‡ฆ' }, { code: 'ROU', name: 'Romania', flag: '๐Ÿ‡ท๐Ÿ‡ด' }, { code: 'RUS', name: 'Russia', flag: '๐Ÿ‡ท๐Ÿ‡บ' }, { code: 'RWA', name: 'Rwanda', flag: '๐Ÿ‡ท๐Ÿ‡ผ' }, { code: 'KNA', name: 'Saint Kitts and Nevis', flag: '๐Ÿ‡ฐ๐Ÿ‡ณ' }, { code: 'LCA', name: 'Saint Lucia', flag: '๐Ÿ‡ฑ๐Ÿ‡จ' }, { code: 'VCT', name: 'Saint Vincent and the Grenadines', flag: '๐Ÿ‡ป๐Ÿ‡จ' }, { code: 'WSM', name: 'Samoa', flag: '๐Ÿ‡ผ๐Ÿ‡ธ' }, { code: 'SMR', name: 'San Marino', flag: '๐Ÿ‡ธ๐Ÿ‡ฒ' }, { code: 'STP', name: 'Sรฃo Tomรฉ and Prรญncipe', flag: '๐Ÿ‡ธ๐Ÿ‡น' }, { code: 'SAU', name: 'Saudi Arabia', flag: '๐Ÿ‡ธ๐Ÿ‡ฆ' }, { code: 'SEN', name: 'Senegal', flag: '๐Ÿ‡ธ๐Ÿ‡ณ' }, { code: 'SRB', name: 'Serbia', flag: '๐Ÿ‡ท๐Ÿ‡ธ' }, { code: 'SYC', name: 'Seychelles', flag: '๐Ÿ‡ธ๐Ÿ‡จ' }, { code: 'SLE', name: 'Sierra Leone', flag: '๐Ÿ‡ธ๐Ÿ‡ฑ' }, { code: 'SGP', name: 'Singapore', flag: '๐Ÿ‡ธ๐Ÿ‡ฌ' }, { code: 'SVK', name: 'Slovakia', flag: '๐Ÿ‡ธ๐Ÿ‡ฐ' }, { code: 'SVN', name: 'Slovenia', flag: '๐Ÿ‡ธ๐Ÿ‡ฎ' }, { code: 'SLB', name: 'Solomon Islands', flag: '๐Ÿ‡ธ๐Ÿ‡ง' }, { code: 'SOM', name: 'Somalia', flag: '๐Ÿ‡ธ๐Ÿ‡ด' }, { code: 'ZAF', name: 'South Africa', flag: '๐Ÿ‡ฟ๐Ÿ‡ฆ' }, { code: 'SSD', name: 'South Sudan', flag: '๐Ÿ‡ธ๐Ÿ‡ธ' }, { code: 'ESP', name: 'Spain', flag: '๐Ÿ‡ช๐Ÿ‡ธ' }, { code: 'LKA', name: 'Sri Lanka', flag: '๐Ÿ‡ฑ๐Ÿ‡ฐ' }, { code: 'SDN', name: 'Sudan', flag: '๐Ÿ‡ธ๐Ÿ‡ฉ' }, { code: 'SUR', name: 'Suriname', flag: '๐Ÿ‡ธ๐Ÿ‡ท' }, { code: 'SWE', name: 'Sweden', flag: '๐Ÿ‡ธ๐Ÿ‡ช' }, { code: 'CHE', name: 'Switzerland', flag: '๐Ÿ‡จ๐Ÿ‡ญ' }, { code: 'SYR', name: 'Syria', flag: '๐Ÿ‡ธ๐Ÿ‡พ' }, { code: 'TWN', name: 'Taiwan', flag: '๐Ÿ‡น๐Ÿ‡ผ' }, { code: 'TJK', name: 'Tajikistan', flag: '๐Ÿ‡น๐Ÿ‡ฏ' }, { code: 'TZA', name: 'Tanzania', flag: '๐Ÿ‡น๐Ÿ‡ฟ' }, { code: 'THA', name: 'Thailand', flag: '๐Ÿ‡น๐Ÿ‡ญ' }, { code: 'TLS', name: 'Timor-Leste', flag: '๐Ÿ‡น๐Ÿ‡ฑ' }, { code: 'TGO', name: 'Togo', flag: '๐Ÿ‡น๐Ÿ‡ฌ' }, { code: 'TON', name: 'Tonga', flag: '๐Ÿ‡น๐Ÿ‡ด' }, { code: 'TTO', name: 'Trinidad and Tobago', flag: '๐Ÿ‡น๐Ÿ‡น' }, { code: 'TUN', name: 'Tunisia', flag: '๐Ÿ‡น๐Ÿ‡ณ' }, { code: 'TUR', name: 'Turkey', flag: '๐Ÿ‡น๐Ÿ‡ท' }, { code: 'TKM', name: 'Turkmenistan', flag: '๐Ÿ‡น๐Ÿ‡ฒ' }, { code: 'TUV', name: 'Tuvalu', flag: '๐Ÿ‡น๐Ÿ‡ป' }, { code: 'UGA', name: 'Uganda', flag: '๐Ÿ‡บ๐Ÿ‡ฌ' }, { code: 'UKR', name: 'Ukraine', flag: '๐Ÿ‡บ๐Ÿ‡ฆ' }, { code: 'ARE', name: 'United Arab Emirates', flag: '๐Ÿ‡ฆ๐Ÿ‡ช' }, { code: 'GBR', name: 'United Kingdom', flag: '๐Ÿ‡ฌ๐Ÿ‡ง' }, { code: 'USA', name: 'United States', flag: '๐Ÿ‡บ๐Ÿ‡ธ' }, { code: 'URY', name: 'Uruguay', flag: '๐Ÿ‡บ๐Ÿ‡พ' }, { code: 'UZB', name: 'Uzbekistan', flag: '๐Ÿ‡บ๐Ÿ‡ฟ' }, { code: 'VUT', name: 'Vanuatu', flag: '๐Ÿ‡ป๐Ÿ‡บ' }, { code: 'VAT', name: 'Vatican City', flag: '๐Ÿ‡ป๐Ÿ‡ฆ' }, { code: 'VEN', name: 'Venezuela', flag: '๐Ÿ‡ป๐Ÿ‡ช' }, { code: 'VNM', name: 'Vietnam', flag: '๐Ÿ‡ป๐Ÿ‡ณ' }, { code: 'YEM', name: 'Yemen', flag: '๐Ÿ‡พ๐Ÿ‡ช' }, { code: 'ZMB', name: 'Zambia', flag: '๐Ÿ‡ฟ๐Ÿ‡ฒ' }, { code: 'ZWE', name: 'Zimbabwe', flag: '๐Ÿ‡ฟ๐Ÿ‡ผ' }, ]; // Countries supported by the Decodo/Smartproxy scraping API geo parameter const SCRAPING_COUNTRIES: Country[] = [ { code: 'AFG', name: 'Afghanistan', flag: '๐Ÿ‡ฆ๐Ÿ‡ซ' }, { code: 'ALB', name: 'Albania', flag: '๐Ÿ‡ฆ๐Ÿ‡ฑ' }, { code: 'DZA', name: 'Algeria', flag: '๐Ÿ‡ฉ๐Ÿ‡ฟ' }, { code: 'AND', name: 'Andorra', flag: '๐Ÿ‡ฆ๐Ÿ‡ฉ' }, { code: 'ATA', name: 'Antarctica', flag: '๐Ÿ‡ฆ๐Ÿ‡ถ' }, { code: 'ARG', name: 'Argentina', flag: '๐Ÿ‡ฆ๐Ÿ‡ท' }, { code: 'ARM', name: 'Armenia', flag: '๐Ÿ‡ฆ๐Ÿ‡ฒ' }, { code: 'AUS', name: 'Australia', flag: '๐Ÿ‡ฆ๐Ÿ‡บ' }, { code: 'AUT', name: 'Austria', flag: '๐Ÿ‡ฆ๐Ÿ‡น' }, { code: 'AZE', name: 'Azerbaijan', flag: '๐Ÿ‡ฆ๐Ÿ‡ฟ' }, { code: 'BHS', name: 'Bahamas', flag: '๐Ÿ‡ง๐Ÿ‡ธ' }, { code: 'BGD', name: 'Bangladesh', flag: '๐Ÿ‡ง๐Ÿ‡ฉ' }, { code: 'BLR', name: 'Belarus', flag: '๐Ÿ‡ง๐Ÿ‡พ' }, { code: 'BEL', name: 'Belgium', flag: '๐Ÿ‡ง๐Ÿ‡ช' }, { code: 'BRA', name: 'Brazil', flag: '๐Ÿ‡ง๐Ÿ‡ท' }, { code: 'BGR', name: 'Bulgaria', flag: '๐Ÿ‡ง๐Ÿ‡ฌ' }, { code: 'KHM', name: 'Cambodia', flag: '๐Ÿ‡ฐ๐Ÿ‡ญ' }, { code: 'CAN', name: 'Canada', flag: '๐Ÿ‡จ๐Ÿ‡ฆ' }, { code: 'CAF', name: 'Central African Republic', flag: '๐Ÿ‡จ๐Ÿ‡ซ' }, { code: 'CHL', name: 'Chile', flag: '๐Ÿ‡จ๐Ÿ‡ฑ' }, { code: 'CHN', name: 'China', flag: '๐Ÿ‡จ๐Ÿ‡ณ' }, { code: 'COL', name: 'Colombia', flag: '๐Ÿ‡จ๐Ÿ‡ด' }, { code: 'COG', name: 'Congo', flag: '๐Ÿ‡จ๐Ÿ‡ฌ' }, { code: 'CRI', name: 'Costa Rica', flag: '๐Ÿ‡จ๐Ÿ‡ท' }, { code: 'HRV', name: 'Croatia', flag: '๐Ÿ‡ญ๐Ÿ‡ท' }, { code: 'CUB', name: 'Cuba', flag: '๐Ÿ‡จ๐Ÿ‡บ' }, { code: 'CYP', name: 'Cyprus', flag: '๐Ÿ‡จ๐Ÿ‡พ' }, { code: 'CZE', name: 'Czechia', flag: '๐Ÿ‡จ๐Ÿ‡ฟ' }, { code: 'DNK', name: 'Denmark', flag: '๐Ÿ‡ฉ๐Ÿ‡ฐ' }, { code: 'DOM', name: 'Dominican Republic', flag: '๐Ÿ‡ฉ๐Ÿ‡ด' }, { code: 'ECU', name: 'Ecuador', flag: '๐Ÿ‡ช๐Ÿ‡จ' }, { code: 'EGY', name: 'Egypt', flag: '๐Ÿ‡ช๐Ÿ‡ฌ' }, { code: 'EST', name: 'Estonia', flag: '๐Ÿ‡ช๐Ÿ‡ช' }, { code: 'FIN', name: 'Finland', flag: '๐Ÿ‡ซ๐Ÿ‡ฎ' }, { code: 'FRA', name: 'France', flag: '๐Ÿ‡ซ๐Ÿ‡ท' }, { code: 'GEO', name: 'Georgia', flag: '๐Ÿ‡ฌ๐Ÿ‡ช' }, { code: 'DEU', name: 'Germany', flag: '๐Ÿ‡ฉ๐Ÿ‡ช' }, { code: 'GHA', name: 'Ghana', flag: '๐Ÿ‡ฌ๐Ÿ‡ญ' }, { code: 'GIB', name: 'Gibraltar', flag: '๐Ÿ‡ฌ๐Ÿ‡ฎ' }, { code: 'GRC', name: 'Greece', flag: '๐Ÿ‡ฌ๐Ÿ‡ท' }, { code: 'GRL', name: 'Greenland', flag: '๐Ÿ‡ฌ๐Ÿ‡ฑ' }, { code: 'GIN', name: 'Guinea', flag: '๐Ÿ‡ฌ๐Ÿ‡ณ' }, { code: 'HTI', name: 'Haiti', flag: '๐Ÿ‡ญ๐Ÿ‡น' }, { code: 'HKG', name: 'Hong Kong', flag: '๐Ÿ‡ญ๐Ÿ‡ฐ' }, { code: 'HUN', name: 'Hungary', flag: '๐Ÿ‡ญ๐Ÿ‡บ' }, { code: 'ISL', name: 'Iceland', flag: '๐Ÿ‡ฎ๐Ÿ‡ธ' }, { code: 'IND', name: 'India', flag: '๐Ÿ‡ฎ๐Ÿ‡ณ' }, { code: 'IDN', name: 'Indonesia', flag: '๐Ÿ‡ฎ๐Ÿ‡ฉ' }, { code: 'IRQ', name: 'Iraq', flag: '๐Ÿ‡ฎ๐Ÿ‡ถ' }, { code: 'IRL', name: 'Ireland', flag: '๐Ÿ‡ฎ๐Ÿ‡ช' }, { code: 'ISR', name: 'Israel', flag: '๐Ÿ‡ฎ๐Ÿ‡ฑ' }, { code: 'ITA', name: 'Italy', flag: '๐Ÿ‡ฎ๐Ÿ‡น' }, { code: 'JAM', name: 'Jamaica', flag: '๐Ÿ‡ฏ๐Ÿ‡ฒ' }, { code: 'JPN', name: 'Japan', flag: '๐Ÿ‡ฏ๐Ÿ‡ต' }, { code: 'JEY', name: 'Jersey', flag: '๐Ÿ‡ฏ๐Ÿ‡ช' }, { code: 'JOR', name: 'Jordan', flag: '๐Ÿ‡ฏ๐Ÿ‡ด' }, { code: 'KAZ', name: 'Kazakhstan', flag: '๐Ÿ‡ฐ๐Ÿ‡ฟ' }, { code: 'KEN', name: 'Kenya', flag: '๐Ÿ‡ฐ๐Ÿ‡ช' }, { code: 'KIR', name: 'Kiribati', flag: '๐Ÿ‡ฐ๐Ÿ‡ฎ' }, { code: 'KOR', name: 'Korea', flag: '๐Ÿ‡ฐ๐Ÿ‡ท' }, { code: 'KWT', name: 'Kuwait', flag: '๐Ÿ‡ฐ๐Ÿ‡ผ' }, { code: 'LVA', name: 'Latvia', flag: '๐Ÿ‡ฑ๐Ÿ‡ป' }, { code: 'LTU', name: 'Lithuania', flag: '๐Ÿ‡ฑ๐Ÿ‡น' }, { code: 'MEX', name: 'Mexico', flag: '๐Ÿ‡ฒ๐Ÿ‡ฝ' }, { code: 'MNG', name: 'Mongolia', flag: '๐Ÿ‡ฒ๐Ÿ‡ณ' }, { code: 'MAR', name: 'Morocco', flag: '๐Ÿ‡ฒ๐Ÿ‡ฆ' }, { code: 'NLD', name: 'Netherlands', flag: '๐Ÿ‡ณ๐Ÿ‡ฑ' }, { code: 'NZL', name: 'New Zealand', flag: '๐Ÿ‡ณ๐Ÿ‡ฟ' }, { code: 'NOR', name: 'Norway', flag: '๐Ÿ‡ณ๐Ÿ‡ด' }, { code: 'OMN', name: 'Oman', flag: '๐Ÿ‡ด๐Ÿ‡ฒ' }, { code: 'PAK', name: 'Pakistan', flag: '๐Ÿ‡ต๐Ÿ‡ฐ' }, { code: 'PAN', name: 'Panama', flag: '๐Ÿ‡ต๐Ÿ‡ฆ' }, { code: 'PHL', name: 'Philippines', flag: '๐Ÿ‡ต๐Ÿ‡ญ' }, { code: 'POL', name: 'Poland', flag: '๐Ÿ‡ต๐Ÿ‡ฑ' }, { code: 'PRT', name: 'Portugal', flag: '๐Ÿ‡ต๐Ÿ‡น' }, { code: 'PRI', name: 'Puerto Rico', flag: '๐Ÿ‡ต๐Ÿ‡ท' }, { code: 'QAT', name: 'Qatar', flag: '๐Ÿ‡ถ๐Ÿ‡ฆ' }, { code: 'ROU', name: 'Romania', flag: '๐Ÿ‡ท๐Ÿ‡ด' }, { code: 'RUS', name: 'Russia', flag: '๐Ÿ‡ท๐Ÿ‡บ' }, { code: 'SAU', name: 'Saudi Arabia', flag: '๐Ÿ‡ธ๐Ÿ‡ฆ' }, { code: 'SRB', name: 'Serbia', flag: '๐Ÿ‡ท๐Ÿ‡ธ' }, { code: 'SGP', name: 'Singapore', flag: '๐Ÿ‡ธ๐Ÿ‡ฌ' }, { code: 'SVK', name: 'Slovakia', flag: '๐Ÿ‡ธ๐Ÿ‡ฐ' }, { code: 'SVN', name: 'Slovenia', flag: '๐Ÿ‡ธ๐Ÿ‡ฎ' }, { code: 'SOM', name: 'Somalia', flag: '๐Ÿ‡ธ๐Ÿ‡ด' }, { code: 'ZAF', name: 'South Africa', flag: '๐Ÿ‡ฟ๐Ÿ‡ฆ' }, { code: 'SSD', name: 'South Sudan', flag: '๐Ÿ‡ธ๐Ÿ‡ธ' }, { code: 'ESP', name: 'Spain', flag: '๐Ÿ‡ช๐Ÿ‡ธ' }, { code: 'SWE', name: 'Sweden', flag: '๐Ÿ‡ธ๐Ÿ‡ช' }, { code: 'CHE', name: 'Switzerland', flag: '๐Ÿ‡จ๐Ÿ‡ญ' }, { code: 'TJK', name: 'Tajikistan', flag: '๐Ÿ‡น๐Ÿ‡ฏ' }, { code: 'THA', name: 'Thailand', flag: '๐Ÿ‡น๐Ÿ‡ญ' }, { code: 'TUN', name: 'Tunisia', flag: '๐Ÿ‡น๐Ÿ‡ณ' }, { code: 'TUR', name: 'Turkey', flag: '๐Ÿ‡น๐Ÿ‡ท' }, { code: 'TKM', name: 'Turkmenistan', flag: '๐Ÿ‡น๐Ÿ‡ฒ' }, { code: 'UGA', name: 'Uganda', flag: '๐Ÿ‡บ๐Ÿ‡ฌ' }, { code: 'UKR', name: 'Ukraine', flag: '๐Ÿ‡บ๐Ÿ‡ฆ' }, { code: 'ARE', name: 'United Arab Emirates', flag: '๐Ÿ‡ฆ๐Ÿ‡ช' }, { code: 'GBR', name: 'United Kingdom', flag: '๐Ÿ‡ฌ๐Ÿ‡ง' }, { code: 'USA', name: 'United States', flag: '๐Ÿ‡บ๐Ÿ‡ธ' }, { code: 'URY', name: 'Uruguay', flag: '๐Ÿ‡บ๐Ÿ‡พ' }, { code: 'UZB', name: 'Uzbekistan', flag: '๐Ÿ‡บ๐Ÿ‡ฟ' }, { code: 'VNM', name: 'Viet Nam', flag: '๐Ÿ‡ป๐Ÿ‡ณ' }, { code: 'YEM', name: 'Yemen', flag: '๐Ÿ‡พ๐Ÿ‡ช' }, { code: 'ZWE', name: 'Zimbabwe', flag: '๐Ÿ‡ฟ๐Ÿ‡ผ' }, ]; const CURRENCIES = [ { code: 'EUR', symbol: 'โ‚ฌ', name: 'Euro' }, { code: 'USD', symbol: '$', name: 'US Dollar' }, { code: 'GBP', symbol: 'ยฃ', name: 'British Pound' }, { code: 'CHF', symbol: 'CHF', name: 'Swiss Franc' }, { code: 'JPY', symbol: 'ยฅ', name: 'Japanese Yen' }, { code: 'AUD', symbol: 'A$', name: 'Australian Dollar' }, { code: 'CAD', symbol: 'C$', name: 'Canadian Dollar' }, { code: 'SEK', symbol: 'kr', name: 'Swedish Krona' }, { code: 'NOK', symbol: 'kr', name: 'Norwegian Krone' }, { code: 'DKK', symbol: 'kr', name: 'Danish Krone' }, { code: 'PLN', symbol: 'zล‚', name: 'Polish Zloty' }, { code: 'CZK', symbol: 'Kฤ', name: 'Czech Koruna' }, { code: 'HUF', symbol: 'Ft', name: 'Hungarian Forint' }, { code: 'RON', symbol: 'lei', name: 'Romanian Leu' }, { code: 'BGN', symbol: 'ะปะฒ', name: 'Bulgarian Lev' }, { code: 'TRY', symbol: 'โ‚บ', name: 'Turkish Lira' }, { code: 'RUB', symbol: 'โ‚ฝ', name: 'Russian Ruble' }, { code: 'INR', symbol: 'โ‚น', name: 'Indian Rupee' }, { code: 'CNY', symbol: 'ยฅ', name: 'Chinese Yuan' }, { code: 'KRW', symbol: 'โ‚ฉ', name: 'South Korean Won' }, { code: 'BRL', symbol: 'R$', name: 'Brazilian Real' }, { code: 'MXN', symbol: 'MX$', name: 'Mexican Peso' }, { code: 'ZAR', symbol: 'R', name: 'South African Rand' }, { code: 'AED', symbol: 'ุฏ.ุฅ', name: 'UAE Dirham' }, { code: 'THB', symbol: 'เธฟ', name: 'Thai Baht' }, { code: 'MKD', symbol: 'ะดะตะฝ', name: 'Macedonian Denar' }, { code: 'RSD', symbol: 'ะดะธะฝ', name: 'Serbian Dinar' }, ]; interface SearchSlot { id: number; url: string; priceResults: PriceResult[]; } let slotIdCounter = 1; export default function ProxyInterface() { const { token, logout, user, credentials, googleCredential } = useAuthStore(); const [deviceMode] = useState('desktop'); const [selectedCountries, setSelectedCountries] = useState([SCRAPING_COUNTRIES.find(c => c.code === 'SRB')!]); const [selectedCurrency, setSelectedCurrency] = useState(CURRENCIES[0]); // EUR default const [showCurrencyPicker, setShowCurrencyPicker] = useState(false); const currencyPickerRef = useRef(null); const [showCountryPicker, setShowCountryPicker] = useState(false); const [countrySearch, setCountrySearch] = useState(''); const countryPickerRef = useRef(null); const [currentUrl, setCurrentUrl] = useState(''); const [error, setError] = useState(''); const [logs, setLogs] = useState([]); const [html, setHtml] = useState(''); const [screenshot, setScreenshot] = useState(''); const [htmlVersion, setHtmlVersion] = useState(0); const [showPreview, setShowPreview] = useState(false); const [showLogs, setShowLogs] = useState(false); const [slots, setSlots] = useState([{ id: slotIdCounter++, url: '', priceResults: [] }]); const [liteMode, setLiteMode] = useState(true); const [advancedMode, setAdvancedMode] = useState(false); const [localOnly, setLocalOnly] = useState(true); const [previewEndpointIdx, setPreviewEndpointIdx] = useState(0); const [activeSlotId, setActiveSlotId] = useState(null); const [showHowItWorks, setShowHowItWorks] = useState(false); const [useScrapingApi, setUseScrapingApi] = useState(true); const [scrapeMobile, setScrapeMobile] = useState(false); const [savedBrowserCountries, setSavedBrowserCountries] = useState([]); const [savedScrapingCountries, setSavedScrapingCountries] = useState([]); const wsRef = useRef(null); const addLog = (message: string) => { setLogs((prev) => [...prev.slice(-19), `[${new Date().toLocaleTimeString()}] ${message}`]); }; // Close country picker and currency picker on click outside useEffect(() => { const handleClickOutside = (e: MouseEvent) => { if (countryPickerRef.current && !countryPickerRef.current.contains(e.target as Node)) { setShowCountryPicker(false); setCountrySearch(''); } if (currencyPickerRef.current && !currencyPickerRef.current.contains(e.target as Node)) { setShowCurrencyPicker(false); } }; document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); }, []); const toggleCountry = (country: Country) => { setSelectedCountries(prev => { const exists = prev.find(c => c.code === country.code); if (exists) { if (prev.length === 1) return prev; // keep at least one return prev.filter(c => c.code !== country.code); } if (prev.length >= 3) return prev; // max 3 return [...prev, country]; }); }; const activeCountryList = useScrapingApi ? SCRAPING_COUNTRIES : COUNTRIES; const filteredCountries = activeCountryList.filter(c => c.name.toLowerCase().includes(countrySearch.toLowerCase()) || c.code.toLowerCase().includes(countrySearch.toLowerCase()) ); // Initialize WebSocket connection useEffect(() => { if (!token) return; const ws = new WebSocket(`${WS_URL}/ws`); wsRef.current = ws; ws.onopen = () => { addLog('WebSocket connected'); // Authenticate ws.send(JSON.stringify({ type: 'auth', token })); }; ws.onmessage = (event) => { try { const data = JSON.parse(event.data); switch (data.type) { case 'connected': addLog('Connected to server'); break; case 'authenticated': addLog(`Authenticated as ${data.user.email}`); break; case 'subscribed': addLog(`Subscribed to session ${data.sessionId}`); setCurrentUrl(data.state.currentUrl); break; case 'update': addLog(`Update: ${data.update.type}`); if (data.update.type === 'navigation') { setCurrentUrl(data.update.data.url); } if (data.update.type === 'html_snapshot') { // Increment version to trigger iframe reload setHtmlVersion(prev => prev + 1); } break; case 'navigation_complete': addLog(`Navigation complete: ${data.url}`); setCurrentUrl(data.currentUrl); break; case 'error': addLog(`Error: ${data.message}`); setError(data.message); break; default: addLog(`Unknown message: ${data.type}`); } } catch (err) { console.error('Failed to parse message:', err); } }; ws.onerror = (err) => { addLog('WebSocket error'); console.error('WebSocket error:', err); }; ws.onclose = () => { addLog('WebSocket disconnected'); }; return () => { if (ws.readyState === WebSocket.OPEN) { ws.close(); } }; }, [token]); // Slot helpers const addSlot = () => { if (slots.length >= 6) return; setSlots(prev => [...prev, { id: slotIdCounter++, url: '', priceResults: [] }]); }; const removeSlot = (slotId: number) => { if (slots.length <= 1) return; setSlots(prev => prev.filter(s => s.id !== slotId)); if (activeSlotId === slotId) setActiveSlotId(null); }; const updateSlotUrl = (slotId: number, newUrl: string) => { setSlots(prev => prev.map(s => s.id === slotId ? { ...s, url: newUrl } : s)); }; const updateSlotResults = (slotId: number, updater: (prev: PriceResult[]) => PriceResult[]) => { setSlots(prev => prev.map(s => s.id === slotId ? { ...s, priceResults: updater(s.priceResults) } : s)); }; // Helper: get the currently selected preview endpoint's session info const activeSlot = slots.find(s => s.id === activeSlotId) || null; const getPreviewSession = () => activeSlot?.priceResults[previewEndpointIdx] || null; const hasAnySession = activeSlot?.priceResults.some(r => r.sessionId) || false; const fetchHtml = async () => { const ps = getPreviewSession(); if (!ps?.sessionId || !ps.sessionToken) return; try { const response = await axios.get( `${ps.apiUrl}/api/proxy/session/${ps.sessionId}/html`, { headers: { Authorization: `Bearer ${ps.sessionToken}` } } ); setHtml(response.data); addLog(`[${ps.label}] HTML fetched`); } catch (err: any) { setError(err.response?.data?.error || 'Failed to fetch HTML'); } }; const fetchScreenshot = async () => { const ps = getPreviewSession(); if (!ps?.sessionId || !ps.sessionToken) return; try { const response = await axios.get( `${ps.apiUrl}/api/proxy/session/${ps.sessionId}/screenshot`, { headers: { Authorization: `Bearer ${ps.sessionToken}` }, responseType: 'blob' } ); const imageUrl = URL.createObjectURL(response.data); setScreenshot(imageUrl); addLog(`[${ps.label}] Screenshot captured`); } catch (err: any) { setError(err.response?.data?.error || 'Failed to capture screenshot'); } }; const closeSession = async () => { const ps = getPreviewSession(); if (!ps?.sessionId || !ps.sessionToken || !activeSlotId) return; try { await axios.delete(`${ps.apiUrl}/api/proxy/session/${ps.sessionId}`, { headers: { Authorization: `Bearer ${ps.sessionToken}` }, }); updateSlotResults(activeSlotId, prev => prev.map((r, i) => i === previewEndpointIdx ? { ...r, sessionId: null, sessionToken: null } : r )); setCurrentUrl(''); setHtml(''); setScreenshot(''); setHtmlVersion(0); addLog(`[${ps.label}] Session closed`); } catch (err: any) { setError(err.response?.data?.error || 'Failed to close session'); } }; const isSlotExtracting = (slot: SearchSlot) => slot.priceResults.some(r => r.loading); const anyExtracting = slots.some(s => isSlotExtracting(s)); const extractPrice = async (slotId: number) => { setError(''); const slot = slots.find(s => s.id === slotId); if (!slot || !slot.url.trim()) return; setActiveSlotId(slotId); // Filter endpoints based on localOnly toggle const endpoints = localOnly ? activeEndpoints.filter(ep => ep.devOnly) : activeEndpoints; // Initialize results with loading state const initial: PriceResult[] = endpoints.map(ep => ({ label: ep.label, apiUrl: ep.apiUrl, sessionId: null, sessionToken: null, data: null, loading: true, error: null, })); updateSlotResults(slotId, () => initial); setPreviewEndpointIdx(0); const fetchOne = async (ep: PriceEndpoint, index: number) => { try { let epToken = token!; if (ep.apiUrl !== API_URL) { if (credentials) { const loginRes = await axios.post(`${ep.apiUrl}/api/auth/login`, { email: credentials.email, password: credentials.password, }); epToken = loginRes.data.token; } else if (googleCredential) { const loginRes = await axios.post(`${ep.apiUrl}/api/auth/google`, { credential: googleCredential, }); epToken = loginRes.data.token; } } const authHeaders = { Authorization: `Bearer ${epToken}` }; const createRes = await axios.post( `${ep.apiUrl}/api/proxy/session/create`, { deviceMode, url: slot.url, currency: selectedCurrency.code }, { headers: authHeaders } ); const epSessionId = createRes.data.sessionId; updateSlotResults(slotId, prev => prev.map((r, i) => i === index ? { ...r, sessionId: epSessionId, sessionToken: epToken } : r )); if (index === 0) { setCurrentUrl(createRes.data.currentUrl); addLog(`Session created: ${epSessionId}`); if (wsRef.current?.readyState === WebSocket.OPEN) { wsRef.current.send( JSON.stringify({ type: 'subscribe', sessionId: epSessionId }) ); } } const response = await axios.post( `${ep.apiUrl}/api/proxy/session/${epSessionId}/extract-price`, { liteMode }, { headers: authHeaders } ); const providerLabels: Record = { hotels: 'Hotels.com', expedia: 'Expedia', vrbo: 'VRBO', airbnb: 'Airbnb', booking: 'Booking', agoda: 'Agoda', trip: 'Trip.com', hostelworld: 'Hostelworld', homestay: 'Homestay', travelocity: 'Travelocity', casasrurales: 'CasasRurales', hometogo: 'HomeToGo', plumguide: 'Plum Guide', hipcamp: 'Hipcamp', misterbandb: 'Misterb&b', redawning: 'RedAwning', ostrovok: 'Ostrovok', fliggy: 'Fliggy', makemytrip: 'MakeMyTrip', oyo: 'OYO', goibibo: 'Goibibo', cleartrip: 'Cleartrip', yatra: 'Yatra' }; const providerTag = response.data.provider && providerLabels[response.data.provider] ? ` [${providerLabels[response.data.provider]}]` : ''; addLog(`[${ep.label}]${providerTag} Price extracted โ€” Desktop: ${response.data.desktop.currency}${response.data.desktop.price}, Mobile: ${response.data.mobile.currency}${response.data.mobile.price}`); updateSlotResults(slotId, prev => prev.map((r, i) => i === index ? { ...r, data: response.data, loading: false } : r )); } catch (err: any) { const msg = err.response?.data?.error || err.message || 'Failed to extract price'; addLog(`[${ep.label}] Error: ${msg}`); updateSlotResults(slotId, prev => prev.map((r, i) => i === index ? { ...r, error: msg, loading: false } : r )); } }; await Promise.allSettled(endpoints.map((ep, i) => fetchOne(ep, i))); }; const extractPriceWithScraper = async (slotId: number) => { setError(''); const slot = slots.find(s => s.id === slotId); if (!slot || !slot.url.trim()) return; setActiveSlotId(slotId); // Use selected countries as geo targets const geos = selectedCountries.map(c => ({ label: c.name, geo: c.name })); // Initialize results with loading state (one per geo) const initial: PriceResult[] = geos.map(g => ({ label: g.label, apiUrl: API_URL, sessionId: null, sessionToken: null, data: null, loading: true, error: null, })); updateSlotResults(slotId, () => initial); setPreviewEndpointIdx(0); const fetchOne = async (g: { label: string; geo: string }, index: number) => { try { const authHeaders = { Authorization: `Bearer ${token}` }; const response = await axios.post( `${API_URL}/api/proxy/scrape-price`, { url: slot.url, geo: g.geo, currency: selectedCurrency.code, includeMobile: scrapeMobile }, { headers: authHeaders } ); const providerLabels: Record = { hotels: 'Hotels.com', expedia: 'Expedia', vrbo: 'VRBO', airbnb: 'Airbnb', booking: 'Booking', agoda: 'Agoda', trip: 'Trip.com', hostelworld: 'Hostelworld', homestay: 'Homestay', travelocity: 'Travelocity', casasrurales: 'CasasRurales', hometogo: 'HomeToGo', plumguide: 'Plum Guide', hipcamp: 'Hipcamp', misterbandb: 'Misterb&b', redawning: 'RedAwning', ostrovok: 'Ostrovok', fliggy: 'Fliggy', makemytrip: 'MakeMyTrip', oyo: 'OYO', goibibo: 'Goibibo', cleartrip: 'Cleartrip', yatra: 'Yatra' }; const providerTag = response.data.provider && providerLabels[response.data.provider] ? ` [${providerLabels[response.data.provider]}]` : ''; addLog(`[${g.label}]${providerTag} Scraped โ€” Desktop: ${response.data.desktop.currency}${response.data.desktop.price}, Mobile: ${response.data.mobile.currency}${response.data.mobile.price}`); updateSlotResults(slotId, prev => prev.map((r, i) => i === index ? { ...r, data: response.data, loading: false } : r )); } catch (err: any) { const msg = err.response?.data?.error || err.message || 'Failed to scrape price'; addLog(`[${g.label}] Error: ${msg}`); updateSlotResults(slotId, prev => prev.map((r, i) => i === index ? { ...r, error: msg, loading: false } : r )); } }; await Promise.allSettled(geos.map((g, i) => fetchOne(g, i))); }; const handlePreviewInteraction = (event: any) => { const ps = getPreviewSession(); if (!ps?.sessionId || !wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return; if (event.type === 'preview_navigate') { addLog(`Navigating to ${event.url}`); wsRef.current.send(JSON.stringify({ type: 'navigate', url: event.url })); } else { const { type: eventType, ...eventData } = event; addLog(`Preview interaction: ${eventType}`); wsRef.current.send(JSON.stringify({ type: 'preview_interact', eventType, ...eventData })); } }; return (
{/* โ”€โ”€ Header bar โ”€โ”€ */}
waylow.world
waylow .world

the world at low price

{user?.email}
{/* โ”€โ”€ Global controls (country picker + currency) โ”€โ”€ */}
{showCurrencyPicker && (
{CURRENCIES.map(cur => ( ))}
)}
{useScrapingApi && ( )} {slots.length < 6 && ( )} {slots.length >= 6 && ( Max 6 comparisons )}
{showCountryPicker && (
setCountrySearch(e.target.value)} placeholder="Search countries..." className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-white focus:ring-2 focus:ring-brand-teal/30 focus:border-brand-teal" autoFocus />

Select up to 3 regions. {selectedCountries.length}/3 selected.

{filteredCountries.map(country => { const isSelected = selectedCountries.some(c => c.code === country.code); return ( ); })}
)}
{/* โ”€โ”€ Tagline + CTA โ”€โ”€ */}

Make the right move for your next adventure.

{/* โ”€โ”€ Error โ”€โ”€ */} {error && (
{error}
)} {/* โ”€โ”€ Search slots โ”€โ”€ */} {slots.map((slot, slotIdx) => { const extracting = isSlotExtracting(slot); return (
{/* Search bar */}
updateSlotUrl(slot.id, e.target.value)} placeholder="Paste a Booking.com or Hotels.com hotel link..." className="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl bg-gray-50 focus:bg-white focus:ring-2 focus:ring-brand-teal/30 focus:border-brand-teal text-sm" /> {slots.length > 1 && ( )}
{/* Results for this slot */} {slot.priceResults.length > 0 && (
{slot.priceResults.map((result, idx) => (

{result.label}

{result.loading && (
)} {result.error && (

{result.error}

)} {!result.loading && !result.error && result.data && !result.data.desktop.price && !result.data.mobile.price && (

Price not found on {result.data.provider === 'hotels' ? 'Hotels.com' : result.data.provider === 'airbnb' ? 'Airbnb' : result.data.provider === 'cleartrip' ? 'Cleartrip' : result.data.provider === 'makemytrip' ? 'MakeMyTrip' : result.data.provider === 'goibibo' ? 'Goibibo' : result.data.provider === 'expedia' ? 'Expedia' : result.data.provider === 'agoda' ? 'Agoda' : result.data.provider === 'trip' ? 'Trip.com' : (result.data.provider ?? 'unknown').charAt(0).toUpperCase() + (result.data.provider ?? 'unknown').slice(1)}.

)} {!result.loading && !result.error && result.data && (result.data.desktop.price || result.data.mobile.price) && ( <> {(result.data.provider === 'hotels' || result.data.provider === 'airbnb') && (

Starting from

)}

Desktop

{result.data.desktop.description && (

{result.data.desktop.description}

)}

{result.data.desktop.currency}{result.data.desktop.price || '\u2014'}

Mobile

{result.data.mobile.description && (

{result.data.mobile.description}

)}

{result.data.mobile.currency}{result.data.mobile.price || '\u2014'}

{(result.data.provider === 'hotels' || result.data.provider === 'airbnb') ? (

Lowest non-discounted price

) : result.data.reserveUrl ? ( <>

Remember: personal discounts still apply.

Reserve ) : (

No reserve link

)} {result.data.traffic && (
{result.data.traffic.totalBytes >= 1048576 ? `${(result.data.traffic.totalBytes / 1048576).toFixed(1)} MB` : `${(result.data.traffic.totalBytes / 1024).toFixed(0)} KB`} {result.data.traffic.requestCount} reqs
)} )}
))}
)}
); })} {/* โ”€โ”€ Advanced tools โ”€โ”€ */} {advancedMode && hasAnySession && (
Endpoint: {(activeSlot?.priceResults || []).map((r, idx) => ( ))}
)} {/* โ”€โ”€ Secondary panels โ”€โ”€ */}
{showLogs && (

Activity Log

{logs.map((log, i) => (
{log}
))}
)} {screenshot && (

Screenshot

Screenshot
)} {html && (

HTML Content

                {html}
)}
{/* โ”€โ”€ Live Preview โ”€โ”€ */} {showPreview && getPreviewSession()?.sessionId && (
)}
{/* โ”€โ”€ How It Works Modal โ”€โ”€ */} {showHowItWorks && (
setShowHowItWorks(false)}>
e.stopPropagation()} >

Whether you're wrapping up a business trip, lingering on a beach, or already plotting your next getaway, knowing when to book can be just as strategic as knowing where to go. This app removes the uncertainty from travel planning by letting you compare the advantages of booking from your current destination versus waiting until you're back home. Powered by smart insights, clear comparisons, and traveler-friendly guidance, it helps every kind of traveler make confident, efficient, and stress-free booking decisions. Wherever you are today, your next journey begins here.

How it works

Getting started is quick and intuitive. Choose up to three countries โ€” your current location, your next destination or your home country. Then simply paste a link from your preferred booking platform, airline, or travel site and click “Browse.”

The app instantly analyzes pricing as it appears from each selected country and presents the comparison in a clean, easy-to-read view. Within seconds, you'll know which location offers the best deal, helping you decide whether to book now or later. It's smarter planning โ€” without the spreadsheets.

Who this is for

  • Business travelers: Optimize travel spending while staying on schedule. Quickly determine whether to book from your current location or back home, helping you save time and company budget.
  • Digital nomads: Seamlessly compare prices across countries as you move from place to place, so your bookings stay as flexible as your lifestyle.
  • Families and leisure travelers: Take the stress out of planning by clearly seeing where you'll get the best value before you book your next trip together.
  • Anyone who travels often: If you love exploring the world, this app becomes your smart companion โ€” helping you make better booking decisions every time you travel.

Now it's your move.

Whether you're still on the road or already back home, don't leave your next trip to chance. Try it today, compare in seconds, and book with confidence โ€” smarter travel decisions are just one click away.

)}
); }