Skip to content

Commit 7346d26

Browse files
tonytrinh3tonytrinh3
committed
restored deleted sarch engine
1 parent 1177d22 commit 7346d26

File tree

1 file changed

+70
-216
lines changed

1 file changed

+70
-216
lines changed

‎pages/marketplace.tsx‎

Lines changed: 70 additions & 216 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,21 @@ import { StoreCart } from "@/components/ui/marketcomponents/stores/storecart";
3333
import { MARKET } from "@/utils/constants";
3434
import LiveLogsContext from "@/utils/contexts/LiveLogsContext";
3535

36+
37+
38+
import { VR_GALAXY_DATA, THE_BOOMIN_BOX_DATA, MACROCENTER_DATA } from "@/utils/constants";
39+
import { useToast } from "@/components/ui/use-toast";
40+
41+
42+
const badgesText = [
43+
"Accessories",
44+
"Gifts for devs",
45+
"Popular shops",
46+
"Best sellers",
47+
"Newest",
48+
"Top deals",
49+
];
50+
3651
export default function Marketplace() {
3752
const [headerLabel, setHeaderLabel] = useState<string>("");
3853
const [products, setProducts] = useState<InventoryItem[]>([]);
@@ -42,16 +57,17 @@ export default function Marketplace() {
4257
const { isLoggedIn } = useContext(LoginContext);
4358
const { logLDMetricSent } = useContext(LiveLogsContext);
4459

60+
61+
const { toast } = useToast();
62+
4563
{
4664
/* Step 1 code block */
4765
}
4866

4967
const LDClient = useLDClient();
5068
const { storeAttentionCallout } = useFlags();
51-
52-
{
53-
/* Step 1 code block */
54-
}
69+
const releaseNewSearchEngine = useFlags()["release-new-search-engine"]?.includes("new-search-engine");
70+
5571

5672
const [cart, setCart] = useState<InventoryItem[]>([]);
5773

@@ -66,197 +82,28 @@ export default function Marketplace() {
6682
logLDMetricSent("item-accessed");
6783
};
6884

69-
useEffect(() => {
70-
const data: InventoryItem[] = [
71-
{
72-
id: 1,
73-
vendor: "vrgalaxy",
74-
item: "VR Headset - Advanced Model",
75-
cost: "499.99",
76-
},
77-
{
78-
id: 2,
79-
vendor: "vrgalaxy",
80-
item: "Wireless VR Controllers (Pair)",
81-
cost: "119.99",
82-
},
83-
{
84-
id: 3,
85-
vendor: "vrgalaxy",
86-
item: "VR Treadmill for Immersive Movement",
87-
cost: "899.99",
88-
},
89-
{
90-
id: 4,
91-
vendor: "vrgalaxy",
92-
item: "Haptic Feedback Gloves",
93-
cost: "259.99",
94-
},
95-
{
96-
id: 5,
97-
vendor: "vrgalaxy",
98-
item: "Virtual Reality Game - Space Adventure",
99-
cost: "59.99",
100-
},
101-
{
102-
id: 6,
103-
vendor: "vrgalaxy",
104-
item: "VR Headset Cleaning Kit",
105-
cost: "29.99",
106-
},
107-
{
108-
id: 7,
109-
vendor: "vrgalaxy",
110-
item: "360° VR Camera",
111-
cost: "349.99",
112-
},
113-
{
114-
id: 8,
115-
vendor: "vrgalaxy",
116-
item: "Virtual Reality Development Software",
117-
cost: "199.99",
118-
},
119-
{
120-
id: 9,
121-
vendor: "vrgalaxy",
122-
item: "Adjustable VR Headset Stand",
123-
cost: "39.99",
124-
},
125-
{
126-
id: 10,
127-
vendor: "vrgalaxy",
128-
item: "Virtual Reality Experience Ticket - Underwater World",
129-
cost: "14.99",
130-
},
131-
{
132-
id: 11,
133-
vendor: "macrocenter",
134-
item: "High-Performance Graphics Card - 8GB",
135-
cost: "699.99",
136-
},
137-
{
138-
id: 12,
139-
vendor: "macrocenter",
140-
item: "Gaming Motherboard - RGB Lighting",
141-
cost: "259.99",
142-
},
143-
{
144-
id: 13,
145-
vendor: "macrocenter",
146-
item: "Solid State Drive (SSD) - 1TB",
147-
cost: "129.99",
148-
},
149-
{
150-
id: 14,
151-
vendor: "macrocenter",
152-
item: "DDR4 RAM - 16GB Kit (2x8GB)",
153-
cost: "89.99",
154-
},
155-
{
156-
id: 15,
157-
vendor: "macrocenter",
158-
item: "Modular Power Supply - 750W",
159-
cost: "119.99",
160-
},
161-
{
162-
id: 16,
163-
vendor: "macrocenter",
164-
item: "CPU Cooler - Liquid Cooling System",
165-
cost: "139.99",
166-
},
167-
{
168-
id: 17,
169-
vendor: "macrocenter",
170-
item: "Full-Tower PC Case - Tempered Glass",
171-
cost: "199.99",
172-
},
173-
{
174-
id: 18,
175-
vendor: "macrocenter",
176-
item: "Wireless Gaming Keyboard and Mouse Combo",
177-
cost: "99.99",
178-
},
179-
{
180-
id: 19,
181-
vendor: "macrocenter",
182-
item: "27-inch Gaming Monitor - 144Hz",
183-
cost: "329.99",
184-
},
185-
{
186-
id: 20,
187-
vendor: "macrocenter",
188-
item: "Internal Sound Card - 7.1 Surround",
189-
cost: "79.99",
190-
},
191-
{
192-
id: 21,
193-
vendor: "boominbox",
194-
item: "VR Headset - Advanced Model",
195-
cost: "499.99",
196-
},
197-
{
198-
id: 22,
199-
vendor: "boominbox",
200-
item: "Bluetooth Noise-Canceling Headphones",
201-
cost: "299.99",
202-
},
203-
{
204-
id: 23,
205-
vendor: "boominbox",
206-
item: "Wireless Earbuds - Waterproof Edition",
207-
cost: "159.99",
208-
},
209-
{
210-
id: 24,
211-
vendor: "boominbox",
212-
item: "High-Fidelity Turntable",
213-
cost: "349.99",
214-
},
215-
{
216-
id: 25,
217-
vendor: "boominbox",
218-
item: "Portable Bluetooth Speaker - Rugged Design",
219-
cost: "119.99",
220-
},
221-
{
222-
id: 26,
223-
vendor: "boominbox",
224-
item: "Studio Monitor Speakers (Pair)",
225-
cost: "499.99",
226-
},
227-
{
228-
id: 27,
229-
vendor: "boominbox",
230-
item: "Multi-Channel Home Theater System",
231-
cost: "999.99",
232-
},
233-
{
234-
id: 28,
235-
vendor: "boominbox",
236-
item: "Digital Audio Interface - Pro Series",
237-
cost: "229.99",
238-
},
239-
{
240-
id: 29,
241-
vendor: "boominbox",
242-
item: "Smart Home Sound System with Voice Control",
243-
cost: "399.99",
244-
},
245-
{
246-
id: 30,
247-
vendor: "boominbox",
248-
item: "Professional DJ Mixer",
249-
cost: "699.99",
250-
},
251-
];
252-
setProducts(data);
253-
}, []);
25485

25586
useEffect(() => {
25687
setHeaderLabel(storeAttentionCallout);
25788
}, [storeAttentionCallout]);
25889

25990
const handleOnSelect = (item: InventoryItem) => {
91+
let openShoppingCart: HTMLElement = document?.querySelector(
92+
".shopping-cart-trigger"
93+
) as HTMLElement;
94+
if (openShoppingCart && releaseNewSearchEngine) openShoppingCart.click();
95+
96+
if (releaseNewSearchEngine) {
97+
addToCart(item);
98+
LDClient?.track("search-engine-add-to-cart", LDClient.getContext());
99+
toast({
100+
title: `${item.item} has been added to your cart!`,
101+
wrapperStyle: "bg-gradient-experimentation text-white !text-medium font-bold font-sohne",
102+
});
103+
104+
return;
105+
}
106+
260107
if (item.vendor === "vrgalaxy") {
261108
setOpenVRGalaxy(true);
262109
}
@@ -270,9 +117,14 @@ export default function Marketplace() {
270117

271118
const formatResult = (item: InventoryItem) => {
272119
return (
273-
<>
274-
<span style={{ display: "block", textAlign: "left" }}>{item.item}</span>
275-
</>
120+
<div className="flex justify-between gap-x-5 cursor-pointer items-center mr-4">
121+
<span className="w-full truncate">{item.item} </span>
122+
{releaseNewSearchEngine ? (
123+
<Button className="rounded-none bg-gradient-experimentation font-sohne hover:brightness-[120%] h-auto">
124+
Add To Cart
125+
</Button>
126+
) : null}
127+
</div>
276128
);
277129
};
278130

@@ -352,8 +204,8 @@ export default function Marketplace() {
352204
</>
353205
</NavWrapper>
354206

355-
<section className={`flex h-full bg-ldblack pb-20 text-white flex-col font-roboto`}>
356-
<section className="relative h-2/3 py-28 bg-gradient-experimentation-black grid items-center justify-center">
207+
<main className={`flex h-full bg-ldblack pb-20 text-white flex-col font-roboto`}>
208+
<header className="relative h-2/3 py-28 bg-gradient-experimentation-black grid items-center justify-center">
357209
<img src="elipse.png" className="absolute right-0 top-0" />
358210
<img src="union.png" className="absolute left-0 bottom-0" />
359211
<div className="flex flex-col text-center px-4 sm:mx-auto items-center ">
@@ -362,37 +214,39 @@ export default function Marketplace() {
362214
</h1>
363215
<div className="w-full sm:w-3/4 lg:w-1/2">
364216
<ReactSearchAutocomplete
365-
items={products}
217+
items={[...VR_GALAXY_DATA, ...THE_BOOMIN_BOX_DATA, ...MACROCENTER_DATA]}
366218
onSelect={handleOnSelect}
367219
autoFocus
368220
formatResult={formatResult}
369-
fuseOptions={{ keys: ["item"] }}
221+
fuseOptions={{
222+
shouldSort: true,
223+
threshold: releaseNewSearchEngine ? 0.3 : 0.6, // 0.3 more precise, 0.6 less
224+
location: 0,
225+
distance: 100,
226+
minMatchCharLength: 1,
227+
keys: ["item"],
228+
}}
370229
resultStringKeyName="item"
371230
placeholder="Browse a Galaxy of Storefronts"
231+
styling={{}}
232+
showClear={true}
233+
className="z-10"
372234
/>
373235
</div>
374236
<div className="mt-4 sm:mt-6 gap-x-2 gap-y-4 sm:gap-y-0 grid grid-cols-3 sm:flex sm:grid-cols-0 ">
375-
<Badge className="text-lg border-2 bg-transparent border-gray-500 text-ldlightgray">
376-
Accessories
377-
</Badge>
378-
<Badge className="text-lg border-2 bg-transparent border-gray-500 text-ldlightgray">
379-
Gifts for devs
380-
</Badge>
381-
<Badge className="text-lg border-2 bg-transparent border-gray-500 text-ldlightgray">
382-
Popular shops
383-
</Badge>
384-
<Badge className="text-lg border-2 bg-transparent border-gray-500 text-ldlightgray">
385-
Best sellers
386-
</Badge>
387-
<Badge className="text-lg border-2 bg-transparent border-gray-500 text-ldlightgray">
388-
Newest
389-
</Badge>
390-
<Badge className="text-lg border-2 bg-transparent border-gray-500 text-ldlightgray">
391-
Top deals
392-
</Badge>
237+
{badgesText.map((badgeText, index) => {
238+
return (
239+
<Badge
240+
className="text-lg border-2 bg-transparent border-gray-500 text-ldlightgray justify-center"
241+
key={index}
242+
>
243+
{badgeText}
244+
</Badge>
245+
);
246+
})}
393247
</div>
394248
</div>
395-
</section>
249+
</header>
396250

397251
<section className="mx-8 sm:mx-12 xl:mx-auto pt-14 flex flex-col gap-y-10 px-10">
398252
<section>
@@ -485,7 +339,7 @@ export default function Marketplace() {
485339
</div>
486340
</section>
487341
</section>
488-
</section>
342+
</main>
489343
</motion.main>
490344
)
491345
</AnimatePresence>

0 commit comments

Comments
 (0)