feat: #1204557 Boost Preview Grid Component Design system

packages/components/public/locales/en/boost.json

@@ -6,5 +6,17 @@
   "title.create": "Creating of boost",
   "empty.searchLimitations": "No operator was added. Click on the checkbox to select all search terms or add one.",
   "empty.searchLimitations.queryText": "No search term was added. Click on the checkbox to select all search terms or add one.",
-  "empty.categoryLimitations": "No category is selected. Click on the checkbox to select all categories or choose at least one from the drop-down list."
+  "empty.categoryLimitations": "No category is selected. Click on the checkbox to select all categories or choose at least one from the drop-down list.",
+  "noProductSearch": "No products were found",
+  "beforeBoosting": "Base results",
+  "afterBoosting": "Optimized results",
+  "previewArea": "Preview area",
+  "searchCatalog": "Search catalog",
+  "navigationCatalog": "Navigation catalog",
+  "autocompletionBox": "Autocompletion box",
+  "search": "Search",
+  "termSearch": "Search a term",
+  "selectCategory": "Select a category",
+  "emptyCategoryMessage": "No categories have been selected, please add one below",
+  "emptySearchMessage": "No search terms have been entered, please add one below"
 }

packages/components/public/locales/en/common.json

@@ -58,5 +58,9 @@
   "error.format": "Wrong or incomplet format",
   "placeholder.requestType.search": "Selection of categories",
   "back": "Back",
-  "placeholder.default.textFieldTags": "Add text"
+  "placeholder.default.textFieldTags": "Add text",
+  "result_zero": "result",
+  "results": "results",
+  "result_one": "{{count}} result",
+  "result_other": "{{count}} results"
 }

packages/components/public/locales/fr/boost.json

@@ -6,5 +6,17 @@
   "title.create": "Création d’un boost",
   "empty.searchLimitations": "Aucun opérateur n'a été ajouté. Cliquez sur la case à cocher pour selectionner tous les termes de recherche ou ajoutez-en un.",
   "empty.searchLimitations.queryText": "Aucun terme de recherche n'a été ajouté. Cliquez sur la case à cocher pour selectionner tous les termes de recherche ou ajoutez-en un.",
-  "empty.categoryLimitations": "Aucune catégorie n'est selectionnée. Cliquez sur la case à cocher pour selectionner toutes les catégories ou choississez en au moins une dans la liste déroulante."
+  "empty.categoryLimitations": "Aucune catégorie n'est selectionnée. Cliquez sur la case à cocher pour selectionner toutes les catégories ou choississez en au moins une dans la liste déroulante.",
+  "noProductSearch": "Aucun produit n'a été trouvé",
+  "beforeBoosting": "Résultats de base",
+  "afterBoosting": "Résultats optimisés",
+  "previewArea": "Zone d'aperçu",
+  "searchCatalog": "Recherche catalogue",
+  "navigationCatalog": "Navigation catalogue",
+  "autocompletionBox": "Autocompletion box",
+  "search": "Recherche",
+  "termSearch": "Rechercher un terme",
+  "selectCategory": "Sélectionner une catégorie",
+  "emptyCategoryMessage": "Aucune catégorie n’a été sélectionnée, veuillez en ajouter une ci-dessous",
+  "emptySearchMessage": "Aucun terme de recherche n’a été renseigné, veuillez en ajouter un ci-dessous"
 }

packages/components/public/locales/fr/common.json

@@ -63,5 +63,8 @@
   "All search terms": "Tous les termes de recherches",
   "Add": "Ajouter",
   "Thesaurus": "Thésaurus",
-  "Edit": "Éditer"
+  "results": "résultats",
+  "result_zero": "resultat",
+  "result_one": "{{count}} resultat",
+  "result_other": "{{count}} resultats"
 }

packages/components/src/components/atoms/boost/Boost.stories.tsx

@@ -14,7 +14,7 @@ const Template: ComponentStory<typeof BoostComponent> = (args) => (
 
 export const Boost = Template.bind({})
 Boost.args = {
-  type: 'down' as 'up' | 'down' | 'no boost',
+  type: 'down' as 'up' | 'down' | 'straight',
   boostNumber: 1,
   boostMultiplicator: 1.1,
 }

packages/components/src/components/atoms/boost/Boost.test.tsx

@@ -7,7 +7,7 @@ import Boost from './Boost'
 describe('Boost', () => {
   it('Should match snapschot', () => {
     const infos = {
-      type: 'down' as 'up' | 'down' | 'no boost',
+      type: 'down' as 'up' | 'down' | 'straight',
       boostNumber: 1,
       boostMultiplicator: 1.1,
     }

packages/components/src/components/atoms/boost/Boost.tsx

@@ -4,7 +4,7 @@ import { Box } from '@mui/system'
 import IonIcon from '../IonIcon/IonIcon'
 
 interface IProps {
-  type: 'up' | 'down' | 'no boost'
+  type: 'up' | 'down' | 'straight'
   boostNumber: number
   boostMultiplicator: number
 }
@@ -16,7 +16,7 @@ interface IBoostDetails {
 }
 
 function setBoostDetails(
-  type: 'up' | 'down' | 'no boost',
+  type: 'up' | 'down' | 'straight',
   boostNumber: number,
   boostMultiplicator: number
 ): IBoostDetails {
@@ -35,7 +35,7 @@ function setBoostDetails(
         boostTextColor: 'error.main',
         boostIconName: 'trending-down-outline',
       }
-    case 'no boost':
+    case 'straight':
       return {
         boostText: 'no boost',
         boostColor: 'neutral.light',
@@ -67,7 +67,7 @@ function Boost(props: IProps): JSX.Element {
         <IonIcon
           name={boostDetail.boostIconName}
           style={
-            type === 'no boost'
+            type === 'straight'
               ? { width: '14px', height: '14px' }
               : { width: '14px', height: '8px' }
           }

packages/components/src/components/atoms/form/PreviewGridBoostConfiguration.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import PreviewGridBoostConfigurationComponent from './PreviewGridBoostConfiguration'
+
+export default {
+  title: 'Atoms/Form/PreviewGridBoostConfiguration',
+  component: PreviewGridBoostConfigurationComponent,
+} as ComponentMeta<typeof PreviewGridBoostConfigurationComponent>
+
+const Template: ComponentStory<
+  typeof PreviewGridBoostConfigurationComponent
+> = () => {
+  return <PreviewGridBoostConfigurationComponent />
+}
+
+export const PreviewGridBoostConfiguration = Template.bind({})

packages/components/src/components/atoms/form/PreviewGridBoostConfiguration.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from 'react'
+import PreviewBoostingTable from '../../organisms/PreviewBoostingTable/PreviewBoostingTable'
+import FiltersPreviewBoostingTabs, {
+  IPreviewBoostFilter,
+} from '../../molecules/FiltersPreviewBoostingTabs/FiltersPreviewBoostingTabs'
+import { useTranslation } from 'react-i18next'
+import { ITreeItem } from '@elastic-suite/gally-admin-shared'
+import { styled } from '@mui/material'
+import Pagination from '../../molecules/CustomTable/Pagination/Pagination'
+
+import productsMock from '../../../../public/mocks/boosts_preview_bags_search.json'
+import categoriesMock from '../../../../public/mocks/categories.json'
+
+const PreviewContainer = styled('div')(({ theme }) => ({
+  borderRadius: theme.shape.borderRadius,
+  padding: theme.spacing(2),
+  paddingBottom: theme.spacing(4),
+  fontFamily: 'Inter',
+  backgroundColor: '#E2E6F3',
+  overflow: 'hidden',
+
+  '.previewArea': {
+    margin: 0,
+    padding: 0,
+    fontSize: '12px',
+    fontFamily: 'var(--gally-font)',
+    lineHeight: '18px',
+    color: theme.palette.colors.neutral['600'],
+  },
+}))
+
+export default function PreviewGridBoostConfiguration(): JSX.Element {
+  const [filter, setFilter] = useState<IPreviewBoostFilter>({
+    type: 'search',
+    value: '',
+  })
+  const [products, setProducts] = useState<
+    | {
+        id: string
+        resultsAfter: any
+        resultsBefore: any
+      }
+    | undefined
+  >(undefined)
+  const [categories, setCategories] = useState<ITreeItem[]>([])
+  const [currentPage, setCurrentPage] = useState<number>(0)
+  const [count, setCount] = useState<number>(0)
+  const rowsPerPage = 20
+  const { t } = useTranslation('boost')
+
+  useEffect(() => {
+    // TODO : Replace by GRAPHQL request
+    setProducts(undefined)
+    if (filter.value) {
+      setProducts(productsMock.data.previewBoost)
+      setCount(productsMock.data.previewBoost.resultsAfter.length)
+      setCurrentPage(0)
+    }
+  }, [filter])
+
+  useEffect(() => {
+    // TODO: Replace by GRAPHQL request
+    setCategories(categoriesMock.categories)
+  }, [])
+
+  return (
+    <>
+      <FiltersPreviewBoostingTabs
+        onSendFilter={setFilter}
+        categories={categories}
+      />
+      {Boolean(products) && (
+        <>
+          <Pagination
+            style={{
+              borderRadius: '8px',
+              marginBottom: '16px',
+              marginTop: '32px',
+            }}
+            currentPage={currentPage}
+            onPageChange={setCurrentPage}
+            rowsPerPage={rowsPerPage}
+            count={count}
+            rowsPerPageOptions={[]}
+            withResults
+          />
+          <PreviewContainer>
+            <p className="previewArea">{t('previewArea')}</p>
+            <PreviewBoostingTable
+              productsBefore={products?.resultsBefore}
+              productsAfter={products?.resultsAfter}
+            />
+            <Pagination
+              style={{ padding: '0 16px', border: 'none' }}
+              currentPage={currentPage}
+              onPageChange={setCurrentPage}
+              rowsPerPage={rowsPerPage}
+              count={count}
+              rowsPerPageOptions={[]}
+              withResults
+              isBottom
+            />
+          </PreviewContainer>
+        </>
+      )}
+    </>
+  )
+}

packages/components/src/components/atoms/form/SearchBar.stories.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import SearchBarComponent from './SearchBar'
+import { action } from '@storybook/addon-actions'
+
+export default {
+  title: 'Atoms/Form/SearchBar',
+  component: SearchBarComponent,
+} as ComponentMeta<typeof SearchBarComponent>
+
+const Template: ComponentStory<typeof SearchBarComponent> = ({
+  value,
+  ...args
+}) => {
+  const [val, setVal] = useState(value)
+  const sendFilter = action('send Filter')
+
+  return (
+    <SearchBarComponent
+      {...args}
+      value={val}
+      onChange={setVal}
+      onResearch={(): void => sendFilter(val)}
+    />
+  )
+}
+
+export const SearchBar = Template.bind({})
+
+SearchBar.args = {
+  value: '',
+  placeholder: 'Rechercher',
+}

packages/components/src/components/atoms/form/SearchBar.tsx

@@ -0,0 +1,40 @@
+import InputText from './InputText'
+import { InputAdornment } from '@mui/material'
+import IonIcon from '../IonIcon/IonIcon'
+import React, { FormEvent } from 'react'
+
+export default function SearchBar({
+  value,
+  onChange,
+  onResearch,
+  placeholder,
+}: {
+  value: string
+  onChange: (value: string) => void
+  onResearch: () => void
+  placeholder: string
+}): JSX.Element {
+  const handleSubmit = (event: FormEvent): void => {
+    event.preventDefault()
+    onResearch()
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <InputText
+        value={value}
+        onChange={(value: string | number): void => onChange(value.toString())}
+        placeholder={placeholder}
+        endAdornment={
+          <InputAdornment
+            position="end"
+            onClick={onResearch}
+            sx={{ cursor: 'pointer' }}
+          >
+            <IonIcon name="search" />
+          </InputAdornment>
+        }
+      />
+    </form>
+  )
+}

packages/components/src/components/molecules/CustomTable/Pagination/Pagination.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, MouseEvent, ReactNode } from 'react'
+import React, { CSSProperties, ChangeEvent, MouseEvent, ReactNode } from 'react'
 import {
   Box,
   IconButtonProps,
@@ -28,7 +28,18 @@ const PaginationTextContainer = styled('span')({
   ...paginationStyle,
 })
 
+const StyledParagraph = styled('p')({
+  fontFamily: 'Inter',
+  fontSize: '12px',
+  fontWeight: 400,
+  color: '#424880',
+  lineHeight: '18px',
+  margin: 0,
+})
+
 interface IProps {
+  style?: CSSProperties
+  withResults?: boolean
   isBottom?: boolean
   count: number
   currentPage: number
@@ -42,6 +53,8 @@ interface IProps {
 
 function Pagination(props: IProps): JSX.Element {
   const {
+    style,
+    withResults,
     isBottom,
     count,
     currentPage,
@@ -101,8 +114,21 @@ function Pagination(props: IProps): JSX.Element {
           borderRadius: '8px 8px 0 0',
         }),
         bgcolor: 'colors.white',
+        ...(withResults && {
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          backgroundColor: '#fff',
+          border: '1px solid #E2E6F3',
+          padding: '0 22px',
+        }),
+        ...style,
       }}
     >
+      {Boolean(withResults) && (
+        <StyledParagraph>{t(`result`, { count })}</StyledParagraph>
+      )}
       <TablePagination
         rowsPerPageOptions={rowsPerPageOptions}
         component="div"