@raxonltd/raxon-core 1.1.7 → 1.1.8

package/core/feature/address/api/places.api.ts

@@ -0,0 +1,76 @@
+import { GooglePlaceDetails, GooglePlacePrediction } from '@/core/feature/address/util/address.types';
+
+function getGoogleMapsApiKey(): string {
+  return process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || '';
+}
+
+interface PlacesAutocompleteOptions {
+  components?: string;
+  language?: string;
+  signal?: AbortSignal;
+}
+
+interface PlacesDetailsOptions {
+  language?: string;
+  signal?: AbortSignal;
+}
+
+export async function fetchPlaceAutocomplete(
+  input: string,
+  { components = 'country:tr', language = 'tr', signal }: PlacesAutocompleteOptions = {}
+): Promise<GooglePlacePrediction[]> {
+  const apiKey = getGoogleMapsApiKey();
+  if (!apiKey) {
+    throw new Error('Google Maps API key not configured');
+  }
+
+  const url = new URL('https://maps.googleapis.com/maps/api/place/autocomplete/json');
+  url.searchParams.set('input', input);
+  url.searchParams.set('components', components);
+  url.searchParams.set('language', language);
+  url.searchParams.set('key', apiKey);
+
+  const response = await fetch(url.toString(), { signal });
+
+  if (!response.ok) {
+    throw new Error(`Google Places API error: ${response.status}`);
+  }
+
+  const data = await response.json();
+
+  if (data.status !== 'OK' && data.status !== 'ZERO_RESULTS') {
+    throw new Error('Places API error');
+  }
+
+  return data.predictions || [];
+}
+
+export async function fetchPlaceDetails(
+  placeId: string,
+  { language = 'tr', signal }: PlacesDetailsOptions = {}
+): Promise<GooglePlaceDetails> {
+  const apiKey = getGoogleMapsApiKey();
+  if (!apiKey) {
+    throw new Error('Google Maps API key not configured');
+  }
+
+  const url = new URL('https://maps.googleapis.com/maps/api/place/details/json');
+  url.searchParams.set('place_id', placeId);
+  url.searchParams.set('fields', 'geometry,address_components,formatted_address');
+  url.searchParams.set('language', language);
+  url.searchParams.set('key', apiKey);
+
+  const response = await fetch(url.toString(), { signal });
+
+  if (!response.ok) {
+    throw new Error(`Google Places API error: ${response.status}`);
+  }
+
+  const data = await response.json();
+
+  if (data.status !== 'OK') {
+    throw new Error('Places API error');
+  }
+
+  return data.result;
+}

package/core/feature/address/form/address-search-input.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { Loader2, MapPin, Search } from 'lucide-react';
+import { GooglePlacePrediction } from '@/core/feature/address/util/address.types';
+
+interface AddressSearchInputProps {
+  query: string;
+  onQueryChange: (value: string) => void;
+  results: GooglePlacePrediction[];
+  isSearching: boolean;
+  showResults: boolean;
+  onShowResultsChange: (show: boolean) => void;
+  onSelect: (placeId: string) => void;
+  error?: string;
+  label?: string;
+  placeholder: string;
+  noResultsText: string;
+}
+
+export function AddressSearchInput({
+  query,
+  onQueryChange,
+  results,
+  isSearching,
+  showResults,
+  onShowResultsChange,
+  onSelect,
+  error,
+  label,
+  placeholder,
+  noResultsText,
+}: AddressSearchInputProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        onShowResultsChange(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [onShowResultsChange]);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Escape') {
+      onShowResultsChange(false);
+    }
+    if (e.key === 'Enter' && results.length > 0) {
+      e.preventDefault();
+      onSelect(results[0].place_id);
+    }
+  };
+
+  const showDropdown = showResults && query.length >= 3;
+
+  return (
+    <div ref={containerRef} className="relative">
+      {label ? (
+        <label htmlFor="address-search" className="rizzui-input-label mb-1.5 block text-sm font-medium">
+          {label}
+        </label>
+      ) : null}
+      <div className="relative">
+        <input
+          id="address-search"
+          type="text"
+          value={query}
+          onChange={e => onQueryChange(e.target.value)}
+          onFocus={() => {
+            if (query.length >= 3 && results.length > 0) onShowResultsChange(true);
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          autoComplete="off"
+          className={`rizzui-input-container peer flex h-12 w-full items-center rounded-xl border bg-white py-2 pl-11 pr-11 text-sm shadow-sm transition-all placeholder:text-gray-400 focus:border-[#CF0A2C] focus:outline-none focus:ring-2 focus:ring-[#CF0A2C]/25 ${
+            error ? 'border-red-400 focus:border-red-400 focus:ring-red-500/20' : 'border-gray-200'
+          }`}
+        />
+        <Search className="pointer-events-none absolute left-3.5 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-400" />
+        {isSearching ? (
+          <Loader2 className="absolute right-3.5 top-1/2 h-[18px] w-[18px] -translate-y-1/2 animate-spin text-[#CF0A2C]" />
+        ) : null}
+      </div>
+
+      {error ? <p className="mt-2 text-xs text-red-500">{error}</p> : null}
+
+      {showDropdown ? (
+        <div className="absolute z-50 mt-2 w-full overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl">
+          {results.length > 0 ? (
+            <ul className="max-h-64 overflow-y-auto py-1">
+              {results.map(result => (
+                <li key={result.place_id}>
+                  <button
+                    type="button"
+                    onMouseDown={e => e.preventDefault()}
+                    onClick={() => onSelect(result.place_id)}
+                    className="w-full px-4 py-3 text-left transition-colors hover:bg-red-50/80 focus:bg-red-50 focus:outline-none"
+                  >
+                    <div className="flex items-start gap-3">
+                      <div className="mt-0.5 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gray-100">
+                        <MapPin className="h-3.5 w-3.5 text-gray-500" />
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <p className="truncate text-sm font-medium text-gray-900">
+                          {result.structured_formatting.main_text}
+                        </p>
+                        <p className="mt-0.5 truncate text-xs text-gray-500">
+                          {result.structured_formatting.secondary_text || result.description}
+                        </p>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            !isSearching && <p className="px-4 py-6 text-center text-sm text-gray-500">{noResultsText}</p>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/core/feature/address/hook/use.addres.tsx

@@ -0,0 +1,63 @@
+import { nexineAxios } from "@/core/util/nexine.axios";
+import { IData } from "@/core/interface/nexine.interface";
+import { Address } from "@/core/interface/prisma.interface";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+export const useAddress = () => {
+    
+    const queryClient = useQueryClient();
+
+    return {
+        fetch :  () => {
+            return useQuery({
+                queryKey: ['web','address'],
+                queryFn: async () => {
+                    var response = await nexineAxios.get<IData<Address>>('/customer/address')
+                    return response.data;
+                },
+            })
+        },
+        create :  () => {
+            return useMutation({
+                mutationFn: async (data: any) => {
+                    var respose = await nexineAxios.post('/customer/address', data)
+                    return respose.data;
+                },
+                onSuccess: () => {
+                    queryClient.invalidateQueries({ queryKey: ['web','address'] })
+                }
+            })
+        },
+        detail :  (id : string) => {
+            return useQuery({
+                queryKey: ['web','address','detail',id],
+                enabled : !!id && id !== "" && id != "create",
+                queryFn: async () => {
+                    var response = await nexineAxios.get<Address>(`/customer/address/${id}`)
+                    return response.data;
+                },
+            })
+        },
+        update :  () => {
+            return useMutation({
+                mutationFn: (data: any) => {
+                    return nexineAxios.put('/customer/address', data)
+                },
+                onSuccess: () => {
+                    queryClient.invalidateQueries({ queryKey: ['web','address'] })
+                }
+            })
+        },
+        
+        delete :  () => {
+            return useMutation({
+                mutationFn: (id: string) => {
+                    return nexineAxios.delete(`/customer/address/${id}`)
+                },
+                onSuccess: () => {
+                    queryClient.invalidateQueries({ queryKey: ['web','address'] })
+                }
+            })
+        }
+    }
+};

package/core/feature/address/hook/use.address-autocomplete.ts

@@ -0,0 +1,116 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { fetchPlaceAutocomplete, fetchPlaceDetails } from '@/core/feature/address/api/places.api';
+import { GooglePlacePrediction } from '@/core/feature/address/util/address.types';
+import { parseGooglePlaceResult } from '@/core/feature/address/util/parse-google-place';
+
+const DEBOUNCE_MS = 400;
+const MIN_QUERY_LENGTH = 3;
+
+export function useAddressAutocomplete() {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<GooglePlacePrediction[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [isSelecting, setIsSelecting] = useState(false);
+  const [showResults, setShowResults] = useState(false);
+  const abortRef = useRef<AbortController | null>(null);
+  const searchOnChangeRef = useRef(false);
+
+  const searchAddresses = useCallback(async (input: string) => {
+    if (!input || input.length < MIN_QUERY_LENGTH) {
+      setResults([]);
+      setShowResults(false);
+      return;
+    }
+
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    setIsSearching(true);
+    try {
+      const predictions = await fetchPlaceAutocomplete(input, {
+        signal: controller.signal,
+      });
+      setResults(predictions);
+      setShowResults(true);
+    } catch (error) {
+      if ((error as Error).name !== 'AbortError') {
+        setResults([]);
+      }
+    } finally {
+      setIsSearching(false);
+    }
+  }, []);
+
+  const setQueryValue = useCallback((value: string, options?: { search?: boolean }) => {
+    const shouldSearch = options?.search ?? false;
+    searchOnChangeRef.current = shouldSearch;
+
+    setQuery(prev => {
+      if (prev === value) {
+        if (!shouldSearch) searchOnChangeRef.current = false;
+        return prev;
+      }
+      return value;
+    });
+
+    if (!shouldSearch) {
+      abortRef.current?.abort();
+      setResults([]);
+      setShowResults(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!searchOnChangeRef.current) return;
+
+    const timer = setTimeout(() => {
+      searchAddresses(query);
+      searchOnChangeRef.current = false;
+    }, DEBOUNCE_MS);
+
+    return () => clearTimeout(timer);
+  }, [query, searchAddresses]);
+
+  const selectPlace = useCallback(
+    async (prediction: GooglePlacePrediction) => {
+      setIsSelecting(true);
+      setShowResults(false);
+      try {
+        const result = await fetchPlaceDetails(prediction.place_id);
+        const parsed = parseGooglePlaceResult(result);
+        setQueryValue(parsed.formattedAddress, { search: false });
+        return parsed;
+      } finally {
+        setIsSelecting(false);
+      }
+    },
+    [setQueryValue]
+  );
+
+  const resetSearch = useCallback(() => {
+    setQueryValue('', { search: false });
+  }, [setQueryValue]);
+
+  const setQueryProgrammatic = useCallback(
+    (value: string) => setQueryValue(value, { search: false }),
+    [setQueryValue]
+  );
+
+  const onUserQueryChange = useCallback(
+    (value: string) => setQueryValue(value, { search: true }),
+    [setQueryValue]
+  );
+
+  return {
+    query,
+    setQuery: setQueryProgrammatic,
+    onUserQueryChange,
+    results,
+    isSearching: isSearching || isSelecting,
+    showResults,
+    setShowResults,
+    selectPlace,
+    resetSearch,
+  };
+}

package/core/feature/address/util/address.types.ts

@@ -0,0 +1,38 @@
+export interface GooglePlacePrediction {
+  description: string;
+  place_id: string;
+  structured_formatting: {
+    main_text: string;
+    secondary_text: string;
+  };
+}
+
+export interface GooglePlaceDetails {
+  geometry: {
+    location: {
+      lat: number;
+      lng: number;
+    };
+  };
+  address_components: Array<{
+    long_name: string;
+    short_name: string;
+    types: string[];
+  }>;
+  formatted_address: string;
+}
+
+export interface ParsedAddressData {
+  streetNumber: string;
+  streetName: string;
+  neighborhood: string;
+  district: string;
+  city: string;
+  province: string;
+  country: string;
+  countryCode: string;
+  postalCode: string;
+  latitude: number;
+  longitude: number;
+  formattedAddress: string;
+}

package/core/feature/address/util/parse-google-place.ts

@@ -0,0 +1,66 @@
+import { Address } from '@/core/interface/prisma.interface';
+import { GooglePlaceDetails, ParsedAddressData } from '@/core/feature/address/util/address.types';
+
+function getAddressComponent(
+  components: GooglePlaceDetails['address_components'],
+  types: string[],
+  useShort = false
+) {
+  const component = components.find(comp => types.some(type => comp.types.includes(type)));
+  return useShort ? component?.short_name || '' : component?.long_name || '';
+}
+
+export function parseGooglePlaceResult(placeDetails: GooglePlaceDetails): ParsedAddressData {
+  const components = placeDetails.address_components;
+
+  const district =
+    getAddressComponent(components, ['administrative_area_level_2']) ||
+    getAddressComponent(components, ['sublocality_level_1', 'sublocality']);
+
+  const city =
+    getAddressComponent(components, ['administrative_area_level_1']) ||
+    getAddressComponent(components, ['locality', 'postal_town']);
+
+  return {
+    streetNumber: getAddressComponent(components, ['street_number']),
+    streetName: getAddressComponent(components, ['route']),
+    neighborhood: getAddressComponent(components, ['neighborhood', 'sublocality_level_1', 'sublocality']),
+    district,
+    city,
+    province: getAddressComponent(components, ['administrative_area_level_1']),
+    country: getAddressComponent(components, ['country']),
+    countryCode: getAddressComponent(components, ['country'], true),
+    postalCode: getAddressComponent(components, ['postal_code']),
+    latitude: placeDetails.geometry.location.lat,
+    longitude: placeDetails.geometry.location.lng,
+    formattedAddress: placeDetails.formatted_address,
+  };
+}
+
+export function formatAddressSummary(data: Partial<Address> | ParsedAddressData): string {
+  const street = [data.streetName, 'streetNumber' in data ? data.streetNumber : undefined].filter(Boolean).join(' ');
+  const cityLine = [
+    data.postalCode,
+    'city' in data ? data.city || data.province : data.administrativeAreaLevel1,
+    'district' in data ? data.district : data.administrativeAreaLevel2,
+  ]
+    .filter(Boolean)
+    .join(' ');
+  const country = data.country;
+
+  return [street, cityLine, country].filter(Boolean).join(', ');
+}
+
+export function parsedAddressToFormFields(parsed: ParsedAddressData) {
+  const streetParts = [parsed.neighborhood, parsed.streetName].filter(Boolean);
+  const street = streetParts.join(', ');
+
+  return {
+    street: street || parsed.formattedAddress,
+    buildingNumber: parsed.streetNumber,
+    apartmentNumber: '',
+    postalCode: parsed.postalCode,
+    provinceName: parsed.province || parsed.city,
+    districtName: parsed.district,
+  };
+}

package/core/feature/analytic-event/analytic.event.api.ts

@@ -0,0 +1,27 @@
+import { AnalyticEventType } from '@/core/interface/prisma.interface';
+import { nexineAxios } from '@/core/util/nexine.axios';
+
+export interface ProductAnalyticPayload {
+  productId: string;
+  variantId?: string | null;
+  eventType?: AnalyticEventType;
+}
+
+export interface EmailClickedAnalyticPayload {
+  trackingCode: string;
+  eventType: AnalyticEventType.EMAIL_CLICKED;
+}
+
+export type AnalyticEventPayload = ProductAnalyticPayload | EmailClickedAnalyticPayload;
+
+export async function sendAnalyticEvents(events: AnalyticEventPayload[]) {
+  if (events.length === 0) return;
+
+  await nexineAxios.patch(
+    '/customer/analytic-event',
+    events.map((event) => ({
+      ...event,
+      eventType: 'eventType' in event && event.eventType ? event.eventType : AnalyticEventType.VIEW,
+    }))
+  );
+}

package/core/feature/analytic-event/analytic.event.context.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import React, { createContext, useCallback, useContext, useEffect, useRef } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+import { AnalyticEventType } from '@/core/interface/prisma.interface';
+import { sendAnalyticEvents } from './analytic.event.api';
+import { useAnalyticAutoTrack } from './use.analytic.auto';
+
+interface ProductAnalyticEvent {
+  productId: string;
+  variantId?: string | null;
+}
+
+interface EmailClickedEvent {
+  tcx: string;
+}
+
+interface AnalyticEventContextType {
+  trackProductView: (event: ProductAnalyticEvent) => void;
+  trackProductClick: (event: ProductAnalyticEvent) => void;
+  trackEmailClicked: (event: EmailClickedEvent) => void;
+}
+
+const AnalyticEventContext = createContext<AnalyticEventContextType | undefined>(undefined);
+
+export interface AnalyticEventProviderProps {
+  children: React.ReactNode;
+  productPathPrefix?: string;
+  autoTrack?: boolean;
+}
+
+export const AnalyticEventProvider = ({
+  children,
+  productPathPrefix = '/urunler',
+  autoTrack = true,
+}: AnalyticEventProviderProps) => {
+  const bufferRef = useRef<ProductAnalyticEvent[]>([]);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const tcxProcessedRef = useRef(false);
+
+  const flush = useCallback(async () => {
+    const events = [...bufferRef.current];
+    if (events.length === 0) return;
+
+    bufferRef.current = [];
+
+    try {
+      await sendAnalyticEvents(
+        events.map((event) => ({
+          productId: event.productId,
+          variantId: event.variantId,
+          eventType: AnalyticEventType.VIEW,
+        }))
+      );
+    } catch (error) {
+      console.error('Failed to send product view events', error);
+    }
+  }, []);
+
+  const trackProductView = useCallback(
+    (event: ProductAnalyticEvent) => {
+      if (!event.productId) return;
+
+      const exists = bufferRef.current.some(
+        (item) => item.productId === event.productId && item.variantId === event.variantId
+      );
+      if (!exists) {
+        bufferRef.current.push(event);
+      }
+
+      if (!timeoutRef.current) {
+        timeoutRef.current = setTimeout(() => {
+          flush();
+          timeoutRef.current = null;
+        }, 2000);
+      }
+    },
+    [flush]
+  );
+
+  const trackProductClick = useCallback((event: ProductAnalyticEvent) => {
+    if (!event.productId) return;
+
+    sendAnalyticEvents([
+      {
+        productId: event.productId,
+        variantId: event.variantId,
+        eventType: AnalyticEventType.CLICKED,
+      },
+    ]).catch((error) => {
+      console.error('Failed to send product click event', error);
+    });
+  }, []);
+
+  const removeTcxFromUrl = useCallback(() => {
+    const currentUrl = new URL(window.location.href);
+    if (!currentUrl.searchParams.has('tcx')) return;
+
+    currentUrl.searchParams.delete('tcx');
+    router.replace(currentUrl.pathname + currentUrl.search, { scroll: false });
+  }, [router]);
+
+  const trackEmailClicked = useCallback(
+    (event: EmailClickedEvent) => {
+      if (!event.tcx) return;
+
+      sendAnalyticEvents([
+        {
+          trackingCode: event.tcx,
+          eventType: AnalyticEventType.EMAIL_CLICKED,
+        },
+      ])
+        .then(() => removeTcxFromUrl())
+        .catch((error) => {
+          console.error('Failed to send email clicked event', error);
+        });
+    },
+    [removeTcxFromUrl]
+  );
+
+  useAnalyticAutoTrack({
+    enabled: autoTrack,
+    productPathPrefix,
+    trackProductView,
+    trackProductClick,
+  });
+
+  useEffect(() => {
+    if (tcxProcessedRef.current) return;
+
+    const tcx = searchParams.get('tcx');
+    if (!tcx) return;
+
+    tcxProcessedRef.current = true;
+    trackEmailClicked({ tcx });
+  }, [searchParams, trackEmailClicked]);
+
+  useEffect(() => {
+    const handleUnload = () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      flush();
+    };
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'hidden') {
+        handleUnload();
+      }
+    };
+
+    window.addEventListener('beforeunload', handleUnload);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleUnload);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [flush]);
+
+  return (
+    <AnalyticEventContext.Provider value={{ trackProductView, trackProductClick, trackEmailClicked }}>
+      {children}
+    </AnalyticEventContext.Provider>
+  );
+};
+
+export const useAnalyticEvent = () => {
+  const context = useContext(AnalyticEventContext);
+  if (!context) {
+    throw new Error('useAnalyticEvent must be used within an AnalyticEventProvider');
+  }
+  return context;
+};