Skip to content

Legal Banner

Ready to use

Description

Section titled “Description”

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.

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 };