# give/4.18.0/src/Promotions/InPluginUpsells/resources/js/components/AdditionalAddons.js

GiveWP – Donation Plugin and Fundraising Platform, version 4.18.0. 39 lines.

- Page: https://pluginprobe.com/plugins/give/4.18.0/code/src/Promotions/InPluginUpsells/resources/js/components/AdditionalAddons.js
- Raw: https://pluginprobe.com/plugins/give/4.18.0/raw/src/Promotions/InPluginUpsells/resources/js/components/AdditionalAddons.js
- Modified: 2022-02-25T01:33:58+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.18.0/code/src/Promotions/InPluginUpsells/resources/js/components/AdditionalAddons.js#L10-L20`.

```javascript
import {__} from '@wordpress/i18n';

import {AdditionalAddonCard} from './AdditionalAddonCard';
import {Button} from './Button';
import {Hero} from './Hero';
import styles from './AdditionalAddons.module.css';

const {heading, description, addons, addonButtonCaption, allAddonsUrl} = window.GiveAddons.additionalAddons;

export const AdditionalAddons = () => (
    <article>
        <Hero heading={heading} description={description} />
        <ul className={styles.addons}>
            {addons.map(({name, image, description, url}) => (
                <li key={name}>
                    <AdditionalAddonCard
                        name={name}
                        description={description}
                        image={image}
                        actionText={addonButtonCaption}
                        actionLink={url}
                    />
                </li>
            ))}
        </ul>
        <div className={styles.viewAll}>
            <p
                className={styles.viewAllText}
                dangerouslySetInnerHTML={{
                    __html: __('Didn’t find what you were looking for?<br> View the entire catalog!', 'give'),
                }}
            />
            <Button as="a" href={allAddonsUrl} rel="noopener" target="_blank" className={styles.viewAllButton}>
                {__('View All Add-ons', 'give')}
            </Button>
        </div>
    </article>
);

```