import React, { useState, useEffect, useRef } from "react";
import { Input, Checkbox, Tag } from 'antd';
import "antd/dist/antd.css";
const { Search } = Input;
const WEBSITE_ID = '11111111-1111-1111-1111-111111111111'
const filterTitleMapping = {
product_type: "Categories",
justifyContent: 'space-between'
gridTemplateColumns: 'auto auto auto auto',
border: '1px solid black',
const [searchResults, setSearchResults] = useState([])
const [selectedFilters, setSelectedFilters] = useState({})
const [filters, setFilters] = useState({})
const [isLoading] = useState(false)
const [customerId, setCustomerId] = useState(null)
const [query, setQuery] = useState('')
const initialRender = useRef(true);
const fetchSearch = async (updateFilter) => {
Object.keys(selectedFilters).forEach((key) => {
if (selectedFilters[key].length > 0) {
scope[key] = selectedFilters[key]
aggregations: ["product_type", "brand"]
const res = await fetch(`https://search.stg.p-a.io/search`,
'Accept': 'application/json',
'Content-Type': 'application/json'
body: JSON.stringify(payload)
const resultsJson = await res.json()
setSearchResults(resultsJson?.payload?.results)
setFilters(resultsJson?.payload?.aggregations)
const customerIdFromCookie = getCookie('PAC')
setCustomerId(customerIdFromCookie)
if (initialRender.current) {
initialRender.current = false;
// Reset existing filters
// Update filters when the query changes
// When filters change, only do search, do not update existing filters
const getCookie = (cookieName) => {
let name = cookieName + '='
let cookieAttributes = document.cookie.split(';')
for (var i = 0; i < cookieAttributes.length; i++) {
let cookieAttribute = cookieAttributes[i]
while (cookieAttribute.charAt(0) === ' ') {
cookieAttribute = cookieAttribute.substring(1)
if (cookieAttribute.indexOf(name) === 0) {
return cookieAttribute.substring(name.length, cookieAttribute.length)
const onCheckboxChange = (e, value, key) => {
let cpSelectedFilters = {...selectedFilters}
if (!(key in cpSelectedFilters)) {
cpSelectedFilters[key] = []
cpSelectedFilters[key].push(value)
const index = cpSelectedFilters[key].indexOf(value);
cpSelectedFilters[key].splice(index, 1);
setSelectedFilters(cpSelectedFilters)
<div style={STYLES.app} className="App">
<h1>Particular Audience React Search UI</h1>
<div style={STYLES.header}>
setQuery(event.target.value)
placeholder="Search for your favourite product"
style={{marginBottom: 8}}
<div style={STYLES.subtitle}>
<span onClick={() => { setQuery('shirt') }} style={STYLES.suggestions}> shirt</span>,
<span onClick={() => { setQuery('shoes')}} style={STYLES.suggestions}> shoes</span> or
<span onClick={() => { setQuery('skirt')}} style={STYLES.suggestions}> skirt</span>.
⚡ Super fast search. Check out the search network calls for speed.
<div style={STYLES.body}>
<div style={STYLES.filterContainer}>
{Object.keys(filters).map(key => {
<div key={key} style={STYLES.filterTitle}>{filterTitleMapping[key]}</div>
filters[key].forEach((value, index) => {
els.push(<Checkbox key={value.key} onChange={(e) => { onCheckboxChange(e, value.key, key) }} style={STYLES.checkbox}>{value.key} <Tag>{value.doc_count}</Tag></Checkbox>)
<div style={STYLES.resultsContainer}>
searchResults.map((recommendation) => {
<div key={recommendation.sku_id} style={STYLES.slot}>
<img width={150} height={150} src={recommendation.image_link} />
<p>${recommendation?.attributes?.sale_price}</p>
<p>{recommendation.title}</p>