| 1 |
import React, {useState} from 'react'; |
| 2 |
import styles from './style.module.scss'; |
| 3 |
import {__} from '@wordpress/i18n'; |
| 4 |
import {RecommendedProductData, useRecommendations} from '@givewp/promotions/hooks/useRecommendations'; |
| 5 |
|
| 6 |
interface ProductRecommendationsProps { |
| 7 |
apiSettings: {table; pluginUrl}; |
| 8 |
options: any; |
| 9 |
} |
| 10 |
|
| 11 |
/** |
| 12 |
* @since 2.27.1 |
| 13 |
*/ |
| 14 |
export default function ProductRecommendations({apiSettings, options}: ProductRecommendationsProps) { |
| 15 |
const {getRandomRecommendation, getRecommendation, removeRecommendation} = useRecommendations(apiSettings, options); |
| 16 |
const selectedOption = apiSettings === window.GiveDonors ? getRecommendation() : getRandomRecommendation(); |
| 17 |
const [showRecommendation, setShowRecommendation] = useState<boolean>(!!selectedOption); |
| 18 |
|
| 19 |
const closeMessage = async (async) => { |
| 20 |
setShowRecommendation(false); |
| 21 |
|
| 22 |
await removeRecommendation({ |
| 23 |
option: selectedOption.enum, |
| 24 |
}); |
| 25 |
}; |
| 26 |
|
| 27 |
if (!showRecommendation) { |
| 28 |
return null; |
| 29 |
} |
| 30 |
|
| 31 |
return ( |
| 32 |
<RotatingMessage |
| 33 |
columns={apiSettings.table.columns} |
| 34 |
pluginUrl={apiSettings.pluginUrl} |
| 35 |
selectedOption={selectedOption} |
| 36 |
closeMessage={closeMessage} |
| 37 |
/> |
| 38 |
); |
| 39 |
} |
| 40 |
|
| 41 |
interface RotatingMessageProps { |
| 42 |
selectedOption: RecommendedProductData; |
| 43 |
closeMessage: (async: any) => Promise<void>; |
| 44 |
pluginUrl: string; |
| 45 |
columns: Array<{visible: boolean}>; |
| 46 |
} |
| 47 |
|
| 48 |
/** |
| 49 |
* @since 4.10.0 Refactor html structure to use a single p tag with a span and a link. |
| 50 |
* @since 2.27.1 |
| 51 |
*/ |
| 52 |
function RotatingMessage({selectedOption, closeMessage, pluginUrl, columns}: RotatingMessageProps) { |
| 53 |
const {message = '', documentationPage = '', innerHtml = ''} = selectedOption; |
| 54 |
|
| 55 |
const visibleColumns = columns?.filter((column) => column.visible || column.visible === undefined); |
| 56 |
|
| 57 |
return ( |
| 58 |
<tr className={styles.productRecommendationRow}> |
| 59 |
<td colSpan={visibleColumns.length + 1}> |
| 60 |
<div className={styles.productRecommendation}> |
| 61 |
<img src={`${pluginUrl}build/assets/dist/images/list-table/light-bulb-icon.svg`} /> |
| 62 |
|
| 63 |
<p className={styles.message}> |
| 64 |
<strong>{__('PRO TIP: ', 'give')}</strong> |
| 65 |
<span>{message}</span> |
| 66 |
<a target="_blank" href={documentationPage}> |
| 67 |
{innerHtml} |
| 68 |
<img src={`${pluginUrl}build/assets/dist/images/list-table/external-link-icon.svg`} /> |
| 69 |
</a> |
| 70 |
</p> |
| 71 |
|
| 72 |
<button onClick={closeMessage}> |
| 73 |
<img src={`${pluginUrl}build/assets/dist/images/list-table/circular-exit-icon.svg`} /> |
| 74 |
</button> |
| 75 |
</div> |
| 76 |
</td> |
| 77 |
</tr> |
| 78 |
); |
| 79 |
} |
| 80 |
|
