Merge pull request #214 from bettersg/feature/200-match-map-and-pick-…

…up-filters

feature/200 style the pickup filter similar to map

client/components/map/FilterPanel.tsx

@@ -106,7 +106,7 @@ export const FilterPanel = ({
 	);
 };
 
-function FilterSection({
+export function FilterSection({
 	title,
 	hideDivider,
 	button,
@@ -128,7 +128,7 @@ function FilterSection({
 	);
 }
 
-const CheckboxGroup = ({
+export const CheckboxGroup = ({
 	items,
 	onChange,
 	onSelectAll,

client/components/pickup/ButtonRow.tsx

@@ -1,7 +1,7 @@
+import { ArrowBackIcon, ArrowLeftIcon } from "@chakra-ui/icons";
 import { Button, Flex, Heading, Spacer, Box, ButtonGroup, Icon } from "@chakra-ui/react";
 import { Dispatch, SetStateAction } from "react";
-import { FiMap } from "react-icons/fi";
-import { TbReload } from "react-icons/tb";
+import { BiLeftArrow } from "react-icons/bi";
 import { Pages } from "spa-pages/pageEnums";
 
 type Props = {
@@ -18,19 +18,11 @@ const ButtonRow = ({ setPage }: Props) => {
 			<ButtonGroup gap={"1"}>
 				<Button
 					onClick={() => setPage(Pages.HOME)}
-					leftIcon={<TbReload />}
+					leftIcon={<ArrowBackIcon />}
 					colorScheme={"teal"}
-					size={"xs"}
+					size={"sm"}
 				>
-					Restart
-				</Button>
-				<Button
-					onClick={() => setPage(Pages.MAP)}
-					leftIcon={<Icon as={FiMap} />}
-					colorScheme={"teal"}
-					size={"xs"}
-				>
-					Map
+					Back
 				</Button>
 			</ButtonGroup>
 		</Flex>

client/components/pickup/ItemsAndFilterRow.tsx

@@ -1,31 +1,46 @@
-import { ChevronDownIcon, ChevronUpIcon, Icon } from "@chakra-ui/icons";
-import { Flex, Tag, theme } from "@chakra-ui/react";
-import { useState } from "react";
+import { Flex, theme, useDisclosure } from "@chakra-ui/react";
 import { TEmptyItem, TItemSelection } from "app-context/SheetyContext/types";
 import FilterButton from "./filterPopover";
+import { SelectAndFilterBar, SelectedItemChips } from "spa-pages";
 
 type Props = {
-    items: (TItemSelection | TEmptyItem)[];
+	items: (TItemSelection | TEmptyItem)[];
 };
 
-const ItemsAndFilterRow = (props: Props) => {
-    const colors = theme.colors;
+const ItemsAndFilterRow = ({ items }: Props) => {
+	const colors = theme.colors;
 
-    const [isExpanded, setIsExpanded] = useState(false);
+	const { isOpen: isFilterOpen, onOpen: onFilterOpen, onClose: onFilterClose } = useDisclosure();
 
-    return (
-        <Flex px={4} gap={4}>
-            <Flex justifyContent="space-between" flexGrow={1} border="1px" borderColor={colors.gray[200]} borderRadius="md">
-                <Flex h={isExpanded ? "" : "48px"} flexWrap="wrap" rowGap={4} columnGap={2} px={4} py={3} overflow={isExpanded ? "" : "hidden"}>
-                    {props.items.map((item) => (
-                        <Tag flexShrink={0} size="sm" key={item.name} borderRadius="full" colorScheme="blackAlpha">{item.name}</Tag>
-                    ))}
-                </Flex>
-                <Icon as={isExpanded ? ChevronUpIcon : ChevronDownIcon} boxSize={6} mr={4} my={3} onClick={() => setIsExpanded(!isExpanded)} />
-            </Flex>
-            <FilterButton />
-        </Flex>
-    );
+	return (
+		<Flex px={4}>
+			<Flex
+				justifyContent="space-between"
+				flexGrow={1}
+				border="1px"
+				borderColor={colors.gray[200]}
+				borderRadius="md"
+			>
+				<SelectAndFilterBar
+					selectedOptions={items.map((item, idx) => ({
+						label: item.name,
+						value: item.name,
+						method: item.method,
+						idx,
+					}))}
+					onMultiSelectChange={() => void 0}
+					selectOptions={items.map((item, idx) => ({
+						label: item.name,
+						value: item.name,
+						method: item.method,
+						idx,
+					}))}
+					onFilterOpen={onFilterOpen}
+				/>
+			</Flex>
+			<FilterButton items={items} isOpen={isFilterOpen} onClose={onFilterClose} />
+		</Flex>
+	);
 };
 
-export default ItemsAndFilterRow;
+export default ItemsAndFilterRow;

client/components/pickup/filterPopover.tsx

@@ -1,11 +1,21 @@
-import {Button, Box , IconButton,
-	Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, PopoverCloseButton} from "@chakra-ui/react";
+import { Button, Modal, ModalContent, ModalOverlay } from "@chakra-ui/react";
 import { useState, useRef } from "react";
 import MarkedSlider from "./slider";
 import { BsFilter } from "react-icons/bs";
 import { Icon } from "@chakra-ui/icons";
+import { CheckboxGroup, FilterSection } from "components/map";
+import { COLORS } from "theme";
+import { TEmptyItem, TItemSelection } from "app-context/SheetyContext/types";
 
-const FilterButton = () => {
+const FilterButton = ({
+	isOpen,
+	onClose,
+	items,
+}: {
+	isOpen: boolean;
+	onClose: () => void;
+	items: (TItemSelection | TEmptyItem)[];
+}) => {
 	const initRef = useRef<HTMLElement | null>(null); // Specify the correct type for initRef
 
 	const [priceValue, setPriceValue] = useState(100);
@@ -19,41 +29,41 @@ const FilterButton = () => {
 	};
 
 	return (
-		<Popover initialFocusRef={initRef}>
-			{({ isOpen, onClose }) => (
-				<>
-					<PopoverTrigger>
-					<IconButton
-						icon={<Icon as={BsFilter} />}
-						variant="outline"
-						size="lg"
-						aria-label={"Filter"} />
-					</PopoverTrigger>
-					<PopoverContent>
-						<PopoverHeader>Filter Results</PopoverHeader>
-						<PopoverCloseButton />
-						<PopoverBody p={5}>
-							<Box>
-								Max Price
-								<MarkedSlider value={priceValue} onSliderChange={PriceManager} />
-							</Box>
-							<br />
-							<Box>
-								Min Quantity
-								<MarkedSlider
-									value={quantityValue}
-									onSliderChange={QuantityManager}
-								/>
-							</Box>
+		<Modal isOpen={isOpen} onClose={onClose}>
+			<ModalOverlay />
+			<ModalContent maxWidth="calc(768px - 32px)" marginTop="330px" marginInline="4">
+				<FilterSection
+					title="Your items"
+					button={
+						<Button size="sm" color="white" bgColor={COLORS.Button.primary}>
+							Apply
+						</Button>
+					}
+				>
+					<CheckboxGroup
+						items={items.map((item) => ({
+							isChecked: true,
+							value: item.name,
+							method: item.method,
+						}))}
+						onChange={() => {
+							return void 0;
+						}}
+						onSelectAll={() => {
+							return void 0;
+						}}
+					/>
+				</FilterSection>
 
-							<Button mt={4} colorScheme="teal" onClick={onClose} ref={initRef as React.RefObject<HTMLButtonElement>}>
-								Apply
-							</Button>
-						</PopoverBody>
-					</PopoverContent>
-				</>
-			)}
-		</Popover>
+				<FilterSection title="Min Quantity">
+					<MarkedSlider value={quantityValue} onSliderChange={QuantityManager} />{" "}
+				</FilterSection>
+
+				<FilterSection title="Max Price" hideDivider={true}>
+					<MarkedSlider value={priceValue} onSliderChange={PriceManager} />
+				</FilterSection>
+			</ModalContent>
+		</Modal>
 	);
 };
 

client/components/pickup/slider.tsx

@@ -1,32 +1,29 @@
-import {
-	Slider,
-	SliderTrack,
-	SliderFilledTrack,
-	SliderThumb,
-	SliderMark,
-} from "@chakra-ui/react";
+import { Slider, SliderTrack, SliderFilledTrack, SliderThumb, SliderMark } from "@chakra-ui/react";
 import { Box } from "@chakra-ui/react";
 import { useState } from "react";
+import { COLORS } from "theme";
 
 interface MarkedSliderProps {
 	value: number;
 	onSliderChange: (val: number) => void;
 }
 
 const MarkedSlider: React.FC<MarkedSliderProps> = ({ value, onSliderChange }) => {
-
 	const [sliderValue, setSliderValue] = useState(100);
 
 	const labelStyles = {
 		mt: "2",
 		ml: "-2.5",
-		fontSize: "sm"
+		fontSize: "sm",
 	};
 	return (
-		<Box pt={6} pb={2}>
+		<Box pt={6} pb={2} px={5}>
 			<Slider
-				defaultValue={sliderValue} onChange={(val) => setSliderValue(val)} colorScheme='teal'
-				aria-label='slider-ex-6'>
+				defaultValue={sliderValue}
+				onChange={(val) => setSliderValue(val)}
+				colorScheme="teal"
+				aria-label="slider-ex-6"
+			>
 				<SliderMark value={25} {...labelStyles}>
 					25
 				</SliderMark>
@@ -38,22 +35,22 @@ const MarkedSlider: React.FC<MarkedSliderProps> = ({ value, onSliderChange }) =>
 				</SliderMark>
 				<SliderMark
 					value={sliderValue}
-					textAlign='center'
-					bg='teal'
-					color='white'
-					mt='-10'
-					ml='-5'
-					w='12'
+					textAlign="center"
+					bg="teal"
+					color="white"
+					mt="-10"
+					ml="-5"
+					w="12"
 				>
 					{sliderValue}
 				</SliderMark>
 				<SliderTrack>
-					<SliderFilledTrack />
+					<SliderFilledTrack background="#31979566" />
 				</SliderTrack>
-				<SliderThumb />
+				<SliderThumb background={COLORS.Button.primary} />
 			</Slider>
 		</Box>
 	);
 };
 
-export default MarkedSlider;
+export default MarkedSlider;

client/spa-pages/components/MapPage.tsx

@@ -1,7 +1,7 @@
 // General Imports
 import { BasePage } from "layouts/BasePage";
 import { Flex, VStack, Box, IconButton, useDisclosure } from "@chakra-ui/react";
-import { Dispatch, SetStateAction, useState } from "react";
+import { ComponentProps, Dispatch, SetStateAction, useState } from "react";
 import { Pages } from "spa-pages/pageEnums";
 import { useUserInputs } from "hooks/useUserSelection";
 import { TStateFacilities } from "app-context/SheetyContext/types";
@@ -452,32 +452,48 @@ export const MapHeaderButtons = ({
 					handleBlur={() => handleChangedLocation(itemState)}
 				/>
 			</Flex>
-			<Flex
-				w="100%"
-				direction={"row"}
-				background="white"
-				boxShadow="2px 2px 8px 0px rgba(0, 0, 0, 0.50)"
-				borderRadius="6px"
-				alignItems="center"
-			>
-				<SelectedItemChips
-					selectedOptions={selectedOptions}
-					handleMultiselectOnChange={handleMultiselectOnChange}
-					selectOptions={selectOptions}
-				/>
-				<FilterButton onClick={onFilterOpen} height="44px" />
-			</Flex>
+			<SelectAndFilterBar
+				selectedOptions={selectedOptions}
+				selectOptions={selectOptions}
+				onMultiSelectChange={handleMultiselectOnChange}
+				onFilterOpen={onFilterOpen}
+			/>
 		</VStack>
 	);
 };
 
-function SelectedItemChips({
+export function SelectAndFilterBar({
 	selectedOptions,
-	handleMultiselectOnChange,
+	selectOptions,
+	onMultiSelectChange,
+	onFilterOpen,
+}: ComponentProps<typeof SelectedItemChips> & { onFilterOpen: () => void }) {
+	return (
+		<Flex
+			w="100%"
+			direction={"row"}
+			background="white"
+			boxShadow="2px 2px 8px 0px rgba(0, 0, 0, 0.50)"
+			borderRadius="6px"
+			alignItems="center"
+		>
+			<SelectedItemChips
+				selectedOptions={selectedOptions}
+				onMultiSelectChange={onMultiSelectChange}
+				selectOptions={selectOptions}
+			/>
+			<FilterButton onClick={onFilterOpen} height="44px" />
+		</Flex>
+	);
+}
+
+export function SelectedItemChips({
+	selectedOptions,
+	onMultiSelectChange,
 	selectOptions,
 }: {
 	selectedOptions: OptionType[];
-	handleMultiselectOnChange: (
+	onMultiSelectChange: (
 		newValue: MultiValue<OptionType>,
 		actionMeta: ActionMeta<OptionType>,
 	) => void;
@@ -488,7 +504,7 @@ function SelectedItemChips({
 			isMulti
 			defaultValue={selectedOptions}
 			value={selectedOptions}
-			onChange={handleMultiselectOnChange}
+			onChange={onMultiSelectChange}
 			options={selectOptions}
 			styles={{
 				container: (base) => ({