Skip to content

Legal Banner

The AEM Legal Banner component renders a legal banner that meets national legal requirements. It generates and displays the banner based on the data provided through its props.

  • React

Maintained by Foundation

Ready to use

React

Properties

Section titled “Properties”
Prop Type Description Optional
legalBanner LegalBanner The legal banner properties ❌

LegalBanner

Section titled “LegalBanner”
Prop Type Description Optional
finance (Record<string, string> | null)[] An array of optional key-value maps containing financial data. ❌
legalBannerEnabled boolean A boolean flag to enable or disable the legal banner. ❌
image {
desktopImage: ImageProperties;
mobileImage: ImageProperties;
}		 Image displayed before financial data. ❌
text string The legal banner disclaimer displayed at the end of the component. ❌

Examples

Section titled “Examples”
Section titled “Legal Banner”
import { LegalBanner } from '@tmedxp/aem-react-components';


const LegalBannerExample = () => {
    const Properties = {
        legalBanner: {
            finance: [
                {
                    Aanbetaling: '€ 8.159,-',
                    Aankoopprijs: '€ 27.195,-',
                    Debetrentevoet: '7,99&nbsp;%',
                    'Jaarlijkse kostenpercentage': '7,99&nbsp;%',
                    Looptijd: '72 maanden',
                    Maandbedrag: '€ 258,01',
                    Slottermijn: '€ 6.663,-',
                    'Te financieren bedrag': '€ 19.036,-',
                    'Totaal te betalen bedrag': '€ 25.239,72',
                },
                {
                    Aanbetaling: '€ 26.666,-',
                    Aankoopprijs: '€ 88.886,-',
                    Debetrentevoet: '7,64&nbsp;%',
                    'Jaarlijkse kostenpercentage': '7,64&nbsp;%',
                    Looptijd: '72 maanden',
                    Maandbedrag: '€ 831,02',
                    Slottermijn: '€ 21.777,-',
                    'Te financieren bedrag': '€ 62.220,-',
                    'Totaal te betalen bedrag': '€ 81.610,44',
                },
            ],
            legalBannerEnabled: true,
            image: {
                desktopImage: {
                    decorative: false,
                    damMetadata: {
                        altLanguages: [],
                        altText: 'legal-banner',
                        domain: 'https://scene7.toyota.eu/',
                        fileReference:
                            '/content/dam/toyota/nmsc/the-netherlands/legal-banner-image-desktop.jpg',
                        fileStatus: 'PublishComplete' as const,
                        folder: 'toyotaeuropetest/toyota/nmsc/the-netherlands/',
                        name: 'legal-banner-image-desktop.jpg',
                        path: 'toyotaeuropetest/legal-banner-image-desktop',
                        publishTimeStamp: 1_765_969_735_882,
                        scene7FileAvs: '',
                        assetState: 'processed' as const,
                        status: 'Finished' as const,
                        title: 'legal-banner-image-desktop',
                        type: 'Image' as const,
                    },
                },
                mobileImage: {
                    decorative: false,
                    damMetadata: {
                        altLanguages: [],
                        altText: 'legal-banner',
                        domain: 'https://scene7.toyota.eu/',
                        fileReference:
                            '/content/dam/toyota/nmsc/the-netherlands/legal-banner-image-mobile.jpg',
                        fileStatus: 'PublishComplete' as const,
                        folder: 'toyotaeuropetest/toyota/nmsc/the-netherlands/',
                        name: 'legal-banner-image-mobile.jpg',
                        path: 'toyotaeuropetest/legal-banner-image-mobile',
                        publishTimeStamp: 1_765_969_735_879,
                        scene7FileAvs: '',
                        assetState: 'processed' as const,
                        status: 'Finished' as const,
                        title: 'legal-banner-image-mobile',
                        type: 'Image' as const,
                    },
                },
            },
            text: '* Het getoonde maandbedrag (termijnbedrag) is indicatief • Aan de berekening kunnen geen rechten worden ontleend • Vraag jouw dealer voor een berekening op maat • Dit niet-doorlopende krediet (Toyota Betaalplan) wordt aangeboden door Toyota Financial Services • Voor nieuw en occasions • Het rentetarief variabel en afhankelijk van het kredietbedrag • Het maximale te financieren bedrag is € 200.000 • Onder voorbehoud van kredietacceptatie • Toetsing en registratie bij BKR • Toyota Financial Services staat onder toezicht van de Autoriteit Financiële Markten (AFM-nr.: 12011089) • Voorwaarden van toepassing, zie toyota.nl/betaalplan • Wijzigingen en typefouten voorbehouden • particulier@toyotafs.nl',
        },
    };


  return (
    <LegalBanner {...Properties} />
  );
};


export { LegalBannerExample };