Support getResultCardImage url for a custom image url (#223)

* Support getResultCardImage url for a custom image url

* pass result instead of imageUrl

Author: mocca102

spec/components/ResultCard/ResultCard.server.test.tsx

@@ -15,6 +15,7 @@ describe(`${ResultCard.name} client`, () => {
     ratingCountKey: 'rating_count',
     ratingScoreKey: 'rating_score',
     renderResultCardPriceDetails: jest.fn().mockReturnValue(<div>Price Details</div>),
+    getResultCardImageUrl: jest.fn().mockReturnValue('www.custom_img.com'),
   };
 
   const contextMocks: Partial<QuizContextValue> = {
@@ -38,6 +39,11 @@ describe(`${ResultCard.name} client`, () => {
       expect(view).toContain('Price Details');
     });
 
+    it('renders custom image url', () => {
+      const view = renderToString(<Subject {...props} />);
+      expect(view).toContain('www.custom_img.com');
+    });
+
     it('calls default price details', () => {
       const view = renderToString(<Subject {...props} renderResultCardPriceDetails={undefined} />);
       expect(view).toContain('80');

spec/components/ResultCard/ResultCard.test.tsx

@@ -15,6 +15,7 @@ describe(`${ResultCard.name} client`, () => {
     ratingCountKey: 'rating_count',
     ratingScoreKey: 'rating_score',
     renderResultCardPriceDetails: jest.fn().mockReturnValue(<div>Price Details</div>),
+    getResultCardImageUrl: jest.fn().mockReturnValue('www.custom_img.com'),
   };
 
   const contextMocks: Partial<QuizContextValue> = {
@@ -59,6 +60,11 @@ describe(`${ResultCard.name} client`, () => {
       render(<Subject {...props} />);
       expect(screen.queryByLabelText('Add to favorites')).not.toBeInTheDocument();
     });
+
+    it('renders custom image url', () => {
+      render(<Subject {...props} />);
+      expect(screen.getByRole('img').getAttribute('src')).toEqual('www.custom_img.com');
+    });
   });
 
   describe('without context function', () => {

src/components/ResultCard/ResultCard.tsx

@@ -13,6 +13,7 @@ interface ResultCardOptions {
   ratingScoreKey?: string;
   resultPosition: number;
   renderResultCardPriceDetails?: (result: QuizResultDataPartial) => JSX.Element;
+  getResultCardImageUrl?: (result: QuizResultDataPartial) => string;
 }
 
 export default function ResultCard(props: ResultCardOptions) {
@@ -24,6 +25,7 @@ export default function ResultCard(props: ResultCardOptions) {
     ratingCountKey,
     ratingScoreKey,
     renderResultCardPriceDetails,
+    getResultCardImageUrl,
   } = props;
   const {
     customAddToFavoritesCallback,
@@ -48,7 +50,10 @@ export default function ResultCard(props: ResultCardOptions) {
   const resultCardContent = () => (
     <>
       <div className='cio-result-card-image'>
-        <img src={result.data?.image_url} alt='product' />
+        <img
+          src={getResultCardImageUrl ? getResultCardImageUrl(result) : result.data?.image_url}
+          alt='product'
+        />
       </div>
       <div className='cio-result-card-text'>
         <p className='cio-result-card-title'>{result.value}</p>

src/components/Results/Results.tsx

@@ -13,6 +13,7 @@ function Results(props: ResultsProps) {
     resultCardRatingScoreKey,
     renderResultCardPriceDetails,
     renderResultCard,
+    getResultCardImageUrl,
   } = props;
 
   const { state, getAddToCartButtonProps, getAddToFavoritesButtonProps, getQuizResultLinkProps } =
@@ -32,6 +33,7 @@ function Results(props: ResultsProps) {
             ratingCountKey={resultCardRatingCountKey}
             ratingScoreKey={resultCardRatingScoreKey}
             renderResultCardPriceDetails={renderResultCardPriceDetails}
+            getResultCardImageUrl={getResultCardImageUrl}
             resultPosition={index + 1}
           />
         )

src/types.ts

@@ -53,6 +53,7 @@ export interface ResultCardOptions {
     },
     index: number
   ) => JSX.Element;
+  getResultCardImageUrl?: (result: QuizResultDataPartial) => string;
 }
 
 export namespace QuizResultsEventsProps {