[CI-3883] Support custom pricing for product suggestions (#173)

* [CI-3883] Add an optional parameter to sections configuration for a custom renderItem function

* Update customRenderItemDescription description

Co-authored-by: Enes Kutay SEZEN <eneskutaysezen@gmail.com>

* remove import

Co-authored-by: Enes Kutay SEZEN <eneskutaysezen@gmail.com>

* Address comments

* lint

---------

Co-authored-by: Islam Moustafa <58053149+mocca102@users.noreply.github.com>
Co-authored-by: Enes Kutay SEZEN <eneskutaysezen@gmail.com>
Co-authored-by: mocca102 <islaam.agamy@gmail.com>

Author: 3 people

src/components/Autocomplete/SectionItemsList/SectionItemsList.tsx

@@ -16,7 +16,8 @@ type SectionItemsListProps = {
 
 // eslint-disable-next-line func-names
 const DefaultRenderSectionItemsList: RenderSectionItemsList = function ({ section }) {
-  const { getSectionProps, getFormProps, advancedParameters } = useContext(CioAutocompleteContext);
+  const { getSectionProps, query, getFormProps, advancedParameters } =
+    useContext(CioAutocompleteContext);
   const { displayShowAllResultsButton, translations } = advancedParameters || {};
   const { onSubmit } = getFormProps();
   const { type, displayName } = section;
@@ -48,13 +49,18 @@ const DefaultRenderSectionItemsList: RenderSectionItemsList = function ({ sectio
         {camelToStartCase(sectionTitle)}
       </h5>
       <ul className='cio-section-items' role='none'>
-        {section?.data?.map((item) => (
-          <SectionItem
-            item={item}
-            key={item?.id}
-            displaySearchTermHighlights={section.displaySearchTermHighlights}
-          />
-        ))}
+        {section?.data?.map((item) => {
+          if (typeof section?.renderItem === 'function') {
+            return section.renderItem({ item, query });
+          }
+          return (
+            <SectionItem
+              item={item}
+              key={item?.id}
+              displaySearchTermHighlights={section.displaySearchTermHighlights}
+            />
+          );
+        })}
       </ul>
       {displayShowAllResultsButton &&
         type === 'autocomplete' &&

src/constants.ts

@@ -256,4 +256,6 @@ export const translationsDescription = `Pass a \`translations\` object to displa
 \`\`\`
 `;
 
+export const customRenderItemDescription = `Customize the rendering of individual items within a Section by providing a \`renderItem\` function. This function allows you to define how each item should be rendered.
+`;
 export const displayShowAllResultsButtonDescription = `Pass a boolean to \`displayShowAllResultsButton\` to display a button at the bottom of the Products section to show all results. This button will submit the form and trigger the \`onSubmit\` callback.`;

src/stories/Autocomplete/Component/Sections.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { CioAutocomplete } from '../../../index';
 import { argTypes } from '../argTypes';
 import { stringifyWithDefaults } from '../../../utils';
@@ -13,6 +14,7 @@ import {
   apiKey,
   onSubmitDefault as onSubmit,
   displaySearchTermHighlightsDescription,
+  customRenderItemDescription,
 } from '../../../constants';
 import { ComponentTemplate, getComponentStoryParams, addComponentStoryDescription } from '.';
 
@@ -200,3 +202,32 @@ addComponentStoryDescription(
   `const args = ${stringifyWithDefaults(RenderCustomSection.args)}`,
   customSectionDescription
 );
+
+export const CustomRenderItem = ComponentTemplate.bind({});
+CustomRenderItem.args = {
+  apiKey,
+  onSubmit,
+  sections: [
+    {
+      indexSectionName: 'Products',
+      renderItem: ({ item, query }) => (
+        <div>
+          <a href={item.data?.url}>
+            <h3>{item.value}</h3>
+            <img src={item.data?.image_url} alt={item.value} />
+          </a>
+          <p>{`$ ${item.data?.price}`}</p>
+          <p>Query: {query}</p>
+        </div>
+      ),
+    },
+    {
+      indexSectionName: 'Search Suggestions',
+    },
+  ],
+};
+addComponentStoryDescription(
+  CustomRenderItem,
+  `const args = ${stringifyWithDefaults(CustomRenderItem.args)}`,
+  customRenderItemDescription
+);

src/types.ts

@@ -121,6 +121,7 @@ export type SectionConfiguration = {
   // This property will only take effect when using the component and not the hook
   displaySearchTermHighlights?: boolean;
   ref?: React.RefObject<HTMLElement>;
+  renderItem?: (props: { item: Item; query: string }) => ReactNode;
 };
 
 export interface AutocompleteSectionConfiguration extends SectionConfiguration {

src/utils.ts

@@ -115,6 +115,15 @@ ${templateCode}
 
 export const functionStrings = {
   onSubmit: `(submitEvent) => console.dir(submitEvent)`,
+  renderItem: `({ item, query }) => (
+                      <div>
+                          <a href={item.data?.url}>
+                            <h3>{item.value}</h3>
+                            <img src={item.data?.image_url} alt={item.value} />
+                          </a>
+                          <p>{item.data?.price}</p>
+                      </div>
+                    )`,
 };
 
 export const stringifyWithDefaults = (obj) => {