woocommerce-paypal-payments/modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js

import data from '../../utils/data';
import TitleBadge, {TITLE_BADGE_INFO} from "./TitleBadge";
import {__} from "@wordpress/i18n";

const BadgeBox = ( props ) => {
    const titleSize = props.titleType && props.titleType === BADGE_BOX_TITLE_BIG ? BADGE_BOX_TITLE_BIG : BADGE_BOX_TITLE_SMALL

    const titleTextClassName = 'ppcp-r-badge-box__title-text ' + `ppcp-r-badge-box__title-text--${titleSize}`;

    const titleBaseClassName = 'ppcp-r-badge-box__title';
    const titleClassName = props.imageBadge ? `${titleBaseClassName} ppcp-r-badge-box__title--has-image-badge` : titleBaseClassName;
	return (
        <div className="ppcp-r-badge-box">
            <span className={titleClassName}>
                <span className={titleTextClassName}>{props.title}</span>

                    {props.imageBadge && (
                        <span className="ppcp-r-badge-box__title-image-badge">
                            {props.imageBadge.map((badge) => data().getImage(badge))}
                        </span>
                )}

                {props.textBadge && (
                    <TitleBadge type={TITLE_BADGE_INFO} text={props.textBadge}/>
                )}
            </span>
            <div className="ppcp-r-badge-box__description">
                {props?.description && (
                    <p
                        className="ppcp-r-badge-box__description"
                        dangerouslySetInnerHTML={{
                            __html: props.description,
                        }}
                    ></p>
                )}
            </div>
        </div>
    );
};

export const BADGE_BOX_TITLE_BIG = 'big';
export const BADGE_BOX_TITLE_SMALL = 'small';
export default BadgeBox;