@nyris/nyris-webapp 0.3.46 → 0.3.48

package/src/components/MobilePostFilter.tsx

@@ -1,7 +1,10 @@
 import React, { memo } from 'react';
-import ExpandablePanelComponent from 'components/PanelResult';
+
+import PostFilterPanel from './PanelResult/PostFilter';
+import PostFilterPanelAlgolia from './PanelResult/PostFilterAlgolia';
 
 import { connectStateResults } from 'react-instantsearch-dom';
+import { useAppSelector } from 'Store/Store';
 
 interface Props {
   allSearchResults: any;
@@ -9,11 +12,17 @@ interface Props {
 }
 
 function MobilePostFilter(props: Props) {
+  const settings = useAppSelector(state => state.settings);
   return (
-    <ExpandablePanelComponent
-      disjunctiveFacets={props?.allSearchResults?.disjunctiveFacets}
-      onApply={props.onApply}
-    />
+    <>
+      {settings.algolia.enabled && (
+        <PostFilterPanelAlgolia
+          disjunctiveFacets={props?.allSearchResults?.disjunctiveFacets}
+          onApply={props.onApply}
+        />
+      )}
+      {!settings.algolia.enabled && <PostFilterPanel onApply={props.onApply} />}
+    </>
   );
 }
 

package/src/components/PanelResult/PostFilter.tsx

@@ -0,0 +1,314 @@
+import { Box, Button, Checkbox } from '@material-ui/core';
+import { DynamicWidgetsCT } from 'components/dynamic-widgets/dynamic-widgets';
+import IconLabel from 'components/icon-label/icon-label';
+import { atom, useAtom } from 'jotai';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import type { CurrentRefinementsProvided } from 'react-instantsearch-core';
+import { useMediaQuery } from 'react-responsive';
+import { useHistory } from 'react-router-dom';
+import { useAppDispatch, useAppSelector } from 'Store/Store';
+import { ExpandablePanelCustom } from './expandable-panel';
+import { getPanelAttributes, getPanelId } from './refinements';
+import { ReactComponent as CloseIcon } from 'common/assets/icons/close.svg';
+import { useTranslation } from 'react-i18next';
+import { setPostFilter } from 'Store/search/Search';
+import { useFilter } from 'hooks/useFilter';
+import { get } from 'lodash';
+
+export type ExpandablePanelProps = CurrentRefinementsProvided & {
+  children: React.ReactNode;
+  className?: string;
+  header?: React.ReactNode | string;
+  attributes?: string[];
+  isOpened?: boolean;
+  onToggle?: any;
+};
+
+export type Panels = {
+  [key: string]: boolean;
+};
+
+function togglePanels(panels: Panels, val: boolean) {
+  return Object.keys(panels).reduce(
+    (acc, panelKey) => ({ ...acc, [panelKey]: val }),
+    {},
+  );
+}
+
+export const refinementsPanelsExpandedAtom = atom(
+  get =>
+    Boolean(Object.values(get(refinementsPanelsAtom)).find(v => v === true)),
+  (get, set, update: (prev: boolean) => boolean) => {
+    const expanded = update(get(refinementsPanelsExpandedAtom));
+    set(
+      refinementsPanelsAtom,
+      togglePanels(get(refinementsPanelsAtom), expanded),
+    );
+  },
+);
+
+export const refinementsPanelsAtom = atom<Panels>({});
+
+function WidgetPanel({ children, onToggle, panelId, ...props }: any) {
+  const onToggleMemoized = useCallback(
+    () => onToggle(panelId),
+    [onToggle, panelId],
+  );
+
+  return (
+    <ExpandablePanelCustom onToggle={onToggleMemoized} {...props}>
+      {children}
+    </ExpandablePanelCustom>
+  );
+}
+
+export default function PostFilterPanel({
+  dynamicWidgets = true,
+  onApply,
+}: any) {
+  const stateGlobal = useAppSelector(state => state);
+  const {
+    settings,
+    search: { postFilter, results },
+  } = stateGlobal;
+  const { refinements } = settings;
+  const [panels, setPanels] = useAtom(refinementsPanelsAtom);
+  const [refinementsPanelsExpanded, setRefinementsPanelsExpanded] = useAtom(
+    refinementsPanelsExpandedAtom,
+  );
+  const history = useHistory();
+  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const filter = useFilter(results);
+
+  // Set initial panels value
+  useEffect(() => {
+    setPanels(prevPanels => ({
+      ...prevPanels,
+      ...refinements.reduce(
+        (acc: any, current: any) => ({
+          ...acc,
+          [getPanelId(current)]: Boolean(current.isExpanded),
+        }),
+        {},
+      ),
+    }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onToggle = useCallback(
+    (panelId: string) => {
+      setPanels(prevPanels => {
+        return {
+          ...prevPanels,
+          [panelId]: !prevPanels[panelId],
+        };
+      });
+    },
+    [setPanels],
+  );
+
+  const widgets = useMemo(() => {
+    return refinements.map((refinement: any) => {
+      const filterList = filter?.[refinement.attribute];
+
+      return (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            rowGap: '16px',
+            marginBottom: '8px',
+          }}
+        >
+          {filterList?.map((item: any, index: number) => {
+            return (
+              <div
+                key={index}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  columnGap: '4px',
+                }}
+              >
+                <Checkbox
+                  color="primary"
+                  size="small"
+                  style={{ padding: '0px' }}
+                  checked={
+                    !!get(postFilter, `${refinement.attribute}.${item.value}`)
+                  }
+                  onChange={() => {
+                    dispatch(
+                      setPostFilter({
+                        [refinement.attribute]: item.value,
+                      }),
+                    );
+                  }}
+                />
+                <p style={{ fontSize: '14px', paddingTop: '3px' }}>
+                  {item.value}
+                </p>
+                <p style={{ fontSize: '14px', paddingTop: '3px' }}>
+                  ({item.count})
+                </p>
+              </div>
+            );
+          })}
+        </div>
+      );
+    });
+  }, [refinements, filter, postFilter, dispatch]);
+
+  const widgetsPanels = useMemo(
+    () =>
+      widgets.map((widget: any, i: any) => {
+        const refinement = refinements[i];
+        const panelId = getPanelId(refinement);
+        const panelAttributes = getPanelAttributes(refinement);
+
+        return widget ? (
+          <WidgetPanel
+            key={panelId}
+            panelId={panelId}
+            attributes={panelAttributes}
+            header={refinement.header}
+            isOpened={isMobile ? !panels[panelId] : panels[panelId]}
+            onToggle={onToggle}
+          >
+            {widget}
+          </WidgetPanel>
+        ) : (
+          <></>
+        );
+      }),
+    [widgets, refinements, onToggle, panels, isMobile],
+  );
+
+  const onTogglePanelsClick = useCallback(() => {
+    setRefinementsPanelsExpanded((expanded: boolean) => !expanded);
+  }, [setRefinementsPanelsExpanded]);
+
+  const handlerApplyfillter = () => {
+    onApply();
+    if (history.location.pathname !== '/result') {
+      history.push('/result');
+    }
+  };
+
+  return (
+    <>
+      {!isMobile && (
+        <div className="wrap-main-header-panel">
+          <Box
+            style={{
+              cursor: 'pointer',
+              paddingBottom: '8px',
+            }}
+          >
+            <div
+              onClick={onTogglePanelsClick}
+              style={{ display: 'flex', justifyContent: 'flex-end' }}
+            >
+              <IconLabel
+                icon={refinementsPanelsExpanded ? 'remove' : 'add'}
+                label={`${
+                  refinementsPanelsExpanded
+                    ? t('Collapse all')
+                    : t('Expand all')
+                } `}
+              />
+            </div>
+          </Box>
+        </div>
+      )}
+      <Box>
+        {isMobile && (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              position: 'sticky',
+              top: '0px',
+              zIndex: 100,
+              background: 'white',
+              alignItems: 'center',
+            }}
+          >
+            <Button
+              onClick={onApply}
+              style={{
+                width: '32px',
+                height: '32px',
+              }}
+            >
+              <CloseIcon color="#2B2C46" />
+            </Button>
+          </div>
+        )}
+        <Box
+          className="box-center-filter"
+          style={{
+            ...(isMobile
+              ? {
+                  paddingLeft: '24px',
+                  paddingRight: '24px',
+                  overflow: 'auto',
+                  marginBottom: '12px',
+                }
+              : {}),
+          }}
+        >
+          <DynamicWidgetsCT enabled={dynamicWidgets}>
+            {widgetsPanels}
+          </DynamicWidgetsCT>
+        </Box>
+      </Box>
+      {isMobile && (
+        <Box
+          style={{
+            position: 'sticky',
+            bottom: 0,
+            width: '100%',
+            display: 'flex',
+          }}
+        >
+          <div
+            className="text-white"
+            style={{
+              width: '100%',
+              backgroundColor: settings.theme?.secondaryColor,
+              fontWeight: 500,
+              fontSize: 14,
+              borderRadius: 0,
+              height: '66px',
+              textTransform: 'none',
+              padding: '16px',
+            }}
+            onClick={handlerApplyfillter}
+          >
+            Cancel
+          </div>
+          <div
+            className="text-white"
+            style={{
+              width: '100%',
+              backgroundColor: settings.theme?.primaryColor,
+              fontWeight: 500,
+              fontSize: 14,
+              borderRadius: 0,
+              height: '66px',
+              textTransform: 'none',
+              padding: '16px',
+            }}
+            onClick={handlerApplyfillter}
+          >
+            Apply filters
+          </div>
+        </Box>
+      )}
+    </>
+  );
+}

package/src/components/PanelResult/{index.tsx → PostFilterAlgolia.tsx}

@@ -13,7 +13,7 @@ import { useHistory } from 'react-router-dom';
 import { useAppSelector } from 'Store/Store';
 import { ExpandablePanelCustom } from './expandable-panel';
 import { getPanelAttributes, getPanelId } from './refinements';
-import CloseIcon from '@material-ui/icons/Close';
+import { ReactComponent as CloseIcon } from 'common/assets/icons/close.svg';
 import { useTranslation } from 'react-i18next';
 
 export type ExpandablePanelProps = CurrentRefinementsProvided & {
@@ -90,7 +90,7 @@ function WidgetPanel({ children, onToggle, panelId, ...props }: any) {
   );
 }
 
-export default function ExpandablePanelComponent({
+export default function PostFilterPanelAlgolia({
   dynamicWidgets = true,
   onApply,
   disjunctiveFacets,
@@ -192,11 +192,15 @@ export default function ExpandablePanelComponent({
     <>
       {!isMobile && (
         <div className="wrap-main-header-panel">
-          <Box style={{ borderBottom: '1px solid #E0E0E0' }}>
-            <Button
-              className="text-neutral-darkest"
+          <Box
+            style={{
+              cursor: 'pointer',
+              paddingBottom: '8px',
+            }}
+          >
+            <div
               onClick={onTogglePanelsClick}
-              style={{ justifyContent: 'flex-end' }}
+              style={{ display: 'flex', justifyContent: 'flex-end' }}
             >
               <IconLabel
                 icon={refinementsPanelsExpanded ? 'remove' : 'add'}
@@ -206,7 +210,7 @@ export default function ExpandablePanelComponent({
                     : t('Expand all')
                 } `}
               />
-            </Button>
+            </div>
           </Box>
         </div>
       )}
@@ -221,12 +225,16 @@ export default function ExpandablePanelComponent({
               zIndex: 100,
               background: 'white',
               alignItems: 'center',
-              paddingTop: '10px',
-              paddingRight: '10px',
             }}
           >
-            <Button onClick={onApply}>
-              <CloseIcon />
+            <Button
+              onClick={onApply}
+              style={{
+                width: '32px',
+                height: '32px',
+              }}
+            >
+              <CloseIcon color="#2B2C46" />
             </Button>
           </div>
         )}
@@ -238,6 +246,7 @@ export default function ExpandablePanelComponent({
                   paddingLeft: '24px',
                   paddingRight: '24px',
                   overflow: 'auto',
+                  marginBottom: '12px',
                 }
               : {}),
           }}
@@ -253,21 +262,41 @@ export default function ExpandablePanelComponent({
             position: 'sticky',
             bottom: 0,
             width: '100%',
+            display: 'flex',
           }}
         >
-          <Button
+          <div
+            className="text-white"
+            style={{
+              width: '100%',
+              backgroundColor: settings.theme?.secondaryColor,
+              fontWeight: 500,
+              fontSize: 14,
+              borderRadius: 0,
+              height: '66px',
+              textTransform: 'none',
+              padding: '16px',
+            }}
+            onClick={handlerApplyfillter}
+          >
+            Cancel
+          </div>
+          <div
             className="text-white"
             style={{
               width: '100%',
               backgroundColor: settings.theme?.primaryColor,
-              fontWeight: 700,
+              fontWeight: 500,
               fontSize: 14,
               borderRadius: 0,
+              height: '66px',
+              textTransform: 'none',
+              padding: '16px',
             }}
             onClick={handlerApplyfillter}
           >
-            APPLY
-          </Button>
+            Apply filters
+          </div>
         </Box>
       )}
     </>

package/src/components/PanelResult/expandable-panel.tsx

@@ -1,6 +1,6 @@
-import { Box, Button, Typography } from '@material-ui/core';
-import AddIcon from '@material-ui/icons/Add';
-import RemoveIcon from '@material-ui/icons/Remove';
+import { Box, Button } from '@material-ui/core';
+import { ReactComponent as RemoveIcon } from 'common/assets/icons/minus.svg';
+import { ReactComponent as AddIcon } from 'common/assets/icons/add.svg';
 import classNames from 'classnames';
 import { Collapse } from 'components/collapse/collapse';
 import { useAtomValue } from 'jotai/utils';
@@ -12,7 +12,7 @@ import type {
 } from 'react-instantsearch-core';
 import { connectCurrentRefinements } from 'react-instantsearch-dom';
 import { useMediaQuery } from 'react-responsive';
-import { useHasRefinements } from '.';
+import { useHasRefinements } from './PostFilterAlgolia';
 import { searchResultsAtom } from './virtual-state-results';
 
 export type ExpandablePanelProps = CurrentRefinementsProvided & {
@@ -42,17 +42,26 @@ function ExpandablePanelComponent({
     <Box>
       <div
         className={classNames(
-          'border-neutral-light',
           {
             hidden: !hasRefinements,
           },
           className,
         )}
+        style={{
+          borderTop: !isMobile ? '1px solid #d3d4d8' : '',
+        }}
       >
         <Button
           className="w-full flex items-center justify-between group"
           aria-expanded={isOpened}
-          style={{ paddingLeft: 0 }}
+          style={{
+            paddingLeft: '2px',
+            paddingRight: '2px',
+            paddingTop: !isMobile ? '8px' : '0px',
+            paddingBottom: '8px',
+            marginTop: '16px',
+            marginBottom: '16px',
+          }}
           onClick={e => {
             if (typeof onToggle === 'function') {
               onToggle(e);
@@ -60,22 +69,19 @@ function ExpandablePanelComponent({
           }}
         >
           <div className="flex items-center w-full subhead">
-            <Typography
-              className="fw-700"
+            <p
               style={{
                 textTransform: 'none',
                 fontFamily: 'Source Sans 3 !important',
                 fontSize: 14,
+                fontWeight: 'bold',
+                lineHeight: '16px',
               }}
             >
               {header || attributes[0]}
-            </Typography>
+            </p>
           </div>
-          {!isMobile && (
-            <div className="text-neutral-dark can-hover:transition-colors can-hover:group-hover:text-neutral-light">
-              {isOpened ? <RemoveIcon /> : <AddIcon />}
-            </div>
-          )}
+          {!isMobile && <>{isOpened ? <RemoveIcon /> : <AddIcon />}</>}
         </Button>
 
         <Collapse isCollapsed={!isOpened}>

package/src/components/ProductAttribute.tsx

@@ -17,40 +17,44 @@ function ProductAttribute(props: Props) {
   } = props;
 
   return (
-    <Box
-      display="flex"
-      flexDirection={'column'}
-      borderRadius={2}
-      width={width}
-      style={{
-        backgroundColor: '#E0E0E0',
-        padding: padding,
-        flexGrow: 1,
-      }}
-    >
-      <Typography
-        style={{
-          color: '#2B2C46',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        }}
-        className="text-f12 fw-700"
-      >
-        {title}
-      </Typography>
-      <Typography
-        style={{
-          color: '#2B2C46',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        }}
-        className="text-f12 fw-400"
-      >
-        {value}
-      </Typography>
-    </Box>
+    <>
+      {title && (
+        <Box
+          display="flex"
+          flexDirection={'column'}
+          borderRadius={2}
+          width={width}
+          style={{
+            backgroundColor: '#E0E0E0',
+            padding: padding,
+            flexGrow: 1,
+          }}
+        >
+          <Typography
+            style={{
+              color: '#2B2C46',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+            className="text-f12 fw-700"
+          >
+            {title}
+          </Typography>
+          <Typography
+            style={{
+              color: '#2B2C46',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+            className="text-f12 fw-400"
+          >
+            {value}
+          </Typography>
+        </Box>
+      )}
+    </>
   );
 }