Skip to content

Commit

Permalink
feat: analytics
Browse files Browse the repository at this point in the history
  • Loading branch information
@matomesc
matomesc committed Aug 27, 2024
1 parent 04e1b16 commit 72fbd76
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 23 deletions.
59 changes: 56 additions & 3 deletions src/components/Locator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,40 @@ const MapContainer = styled.div<MapContainerProps>`
}
`;

function extractAddressComponents(
addressComponents: google.maps.GeocoderAddressComponent[],
) {
const streetNumber = addressComponents.find((c) => {
return c.types.includes('street_number');
});
const street = addressComponents.find((c) => {
return c.types.includes('route');
});
const city = addressComponents.find((c) => {
return c.types.includes('locality');
});
const state = addressComponents.find((c) => {
return c.types.includes('administrative_area_level_1');
});
const zip = addressComponents.find((c) => {
return c.types.includes('postal_code');
});
const country = addressComponents.find((c) => {
return c.types.includes('country');
});

return {
address:
`${streetNumber?.short_name || ''} ${street?.long_name || ''}`.trim(),
city: city?.long_name || '',
state: state?.long_name || '',
stateCode: state?.short_name || '',
zip: zip?.short_name || '',
country: country?.long_name || '',
countryCode: country?.short_name || '',
};
}

export interface LocatorProps {
data: GetLocatorOutput;
geolocation: {
Expand Down Expand Up @@ -408,7 +442,6 @@ export const Locator: React.FC<LocatorProps> = ({ data, geolocation }) => {
return;
}
const [firstResult] = result;

const lat = firstResult.geometry.location.lat();
const lng = firstResult.geometry.location.lng();

Expand All @@ -425,9 +458,20 @@ export const Locator: React.FC<LocatorProps> = ({ data, geolocation }) => {
});

if (sessionId) {
const addressComponents = extractAddressComponents(
firstResult.address_components,
);

postSearchEventsMutateAsync({
sessionId,
query: state.searchBarValue,
address: addressComponents.address,
city: addressComponents.city,
state: addressComponents.state,
stateCode: addressComponents.stateCode,
zip: addressComponents.zip,
country: addressComponents.country,
countryCode: addressComponents.countryCode,
lat,
lng,
}).catch((err) => {
Expand All @@ -442,7 +486,7 @@ export const Locator: React.FC<LocatorProps> = ({ data, geolocation }) => {
// callback
}
}}
onPlaceChanged={({ lat, lng, address }) => {
onPlaceChanged={({ lat, lng, query, addressComponents }) => {
setState((prevState) => {
return {
...prevState,
Expand All @@ -457,9 +501,18 @@ export const Locator: React.FC<LocatorProps> = ({ data, geolocation }) => {
});

if (sessionId) {
const extractedAddressComponents =
extractAddressComponents(addressComponents);
postSearchEventsMutateAsync({
sessionId,
query: address,
query,
address: extractedAddressComponents.address,
city: extractedAddressComponents.city,
state: extractedAddressComponents.state,
stateCode: extractedAddressComponents.stateCode,
zip: extractedAddressComponents.zip,
country: extractedAddressComponents.country,
countryCode: extractedAddressComponents.countryCode,
lat,
lng,
}).catch((err) => {
Expand Down
4 changes: 3 additions & 1 deletion src/components/LocatorWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { useAppStore } from '../stores/appStore';

export const LocatorWrapper: React.FC = () => {
const shopId = window.neutekLocatorId;
const { language } = window.navigator;
const { language, userAgent } = window.navigator;
const setSessionId = useAppStore((state) => state.setSessionId);
const locatorQuery = useQuery({
queryKey: ['locator'],
Expand Down Expand Up @@ -81,6 +81,7 @@ export const LocatorWrapper: React.FC = () => {
browserGeolocationLng: null,
language,
mobile: geolocationQueryData.mobile,
userAgent,
});

if (output.ok) {
Expand All @@ -100,6 +101,7 @@ export const LocatorWrapper: React.FC = () => {
language,
shopId,
postSessionsMutateAsync,
userAgent,
]);

if (locatorQuery.isPending || geolocationQuery.isPending) {
Expand Down
12 changes: 8 additions & 4 deletions src/components/SearchBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,8 @@ export interface SearchBarProps {
onPlaceChanged: (value: {
lat: number;
lng: number;
address: string;
query: string;
addressComponents: google.maps.GeocoderAddressComponent[];
}) => void;
}

Expand All @@ -91,15 +92,17 @@ export const SearchBar: React.FC<SearchBarProps> = ({
// See for full list of fields: https://developers.google.com/maps/documentation/javascript/places#place_search_fields
autocompleteRef.current.setFields([
'geometry',
'formatted_address' /* 'address_components' */,
'formatted_address',
'address_components',
]);
autocompleteRef.current.addListener('place_changed', () => {
const place = autocompleteRef.current?.getPlace();
if (
!place ||
!place.geometry ||
!place.geometry.location ||
!place.formatted_address
!place.formatted_address ||
!place.address_components
) {
return;
}
Expand All @@ -109,7 +112,8 @@ export const SearchBar: React.FC<SearchBarProps> = ({
onPlaceChanged({
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(),
address: place.formatted_address,
query: place.formatted_address,
addressComponents: place.address_components,
});
});
}, [onChange, onPlaceChanged, placesLibrary]);
Expand Down
38 changes: 23 additions & 15 deletions src/dto/api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,21 +108,22 @@ export type GetLocatorOutput = {
};

export const PostSessionsInput = z.object({
id: z.string(),
shopId: z.string(),
ip: z.string(),
country: z.string(),
countryCode: z.string(),
region: z.string(),
regionName: z.string(),
city: z.string(),
zip: z.string(),
id: z.string().max(100),
shopId: z.string().max(100),
ip: z.string().max(100),
country: z.string().max(100),
countryCode: z.string().max(100),
region: z.string().max(100),
regionName: z.string().max(100),
city: z.string().max(100),
zip: z.string().max(100),
ipGeolocationLat: z.number(),
ipGeolocationLng: z.number(),
browserGeolocationLat: z.number().nullable(),
browserGeolocationLng: z.number().nullable(),
language: z.string(),
language: z.string().max(100),
mobile: z.boolean(),
userAgent: z.string().max(5000),
});
export type PostSessionsInput = z.infer<typeof PostSessionsInput>;

Expand All @@ -131,7 +132,7 @@ export type PostSessionsOutput = {
};

export const PutSessionsInput = z.object({
id: z.string(),
id: z.string().max(100),
browserGeolocationLat: z.number(),
browserGeolocationLng: z.number(),
});
Expand All @@ -142,8 +143,15 @@ export type PutSessionsOutput = {
};

export const PostSearchEventsInput = z.object({
sessionId: z.string(),
query: z.string(),
sessionId: z.string().max(100),
query: z.string().max(1000),
address: z.string().max(100),
city: z.string().max(100),
state: z.string().max(100),
stateCode: z.string().max(100),
zip: z.string().max(100),
country: z.string().max(100),
countryCode: z.string().max(100),
lat: z.number(),
lng: z.number(),
});
Expand All @@ -154,8 +162,8 @@ export type PostSearchEventsOutput = {
};

export const PostLocationClickEventsInput = z.object({
sessionId: z.string(),
locationId: z.string(),
sessionId: z.string().max(100),
locationId: z.string().max(100),
});
export type PostLocationClickEventsInput = z.infer<
typeof PostLocationClickEventsInput
Expand Down

0 comments on commit 72fbd76

Please sign in to comment.