Const CustomizeBanner
CustomizeBanner: FC<{ poweredLink: BannerContextProps["poweredLink"] }> = observer(({ poweredLink }) => {const { optionStore, customizeBannerStore } = useStores();const {others: {customizeValuesBanner: {layout,decision,legal,design,headerDesign,bodyDesign,footerDesign,texts,individualLayout,saveButton,group,individualTexts,customCss,mobile},bannerI18n,pageId,pageRequestUuid4,pageIdToPermalink,consentForwardingExternalHosts,isTcf,tcf,tcfMetadata,isEPrivacyUSA,isAgeNotice,isListServicesNotice,groups,essentialGroup,isPoweredByLinkDisabledByException,affiliate,pageByIdUrl}} = optionStore;const { visible, animationVisible, individualPrivacyOpen, previewCheckboxActiveState } = customizeBannerStore;// TCF compatibilityconst tcfObject = useTcf(isTcf, tcf, tcfMetadata);const [tcfFilterBy, setTcfFilterBy] = useState<BannerContextProps["tcfFilterBy"]>("legInt");// Show notice when cookie banner is hidden due to legal settingsconst gotHiddenDueLegal = (state: boolean) => {const customize = getSidebarCustomize();const code = "rcb_invisible_due_legal";try {if (state) {customize.notifications.add(new customize.Notification(code, {message: __('Due to the settings in the "Legal" section, the cookie banner is hidden on this page. Please visit another page!'),type: "warning",dismissible: true}));} else {customize.notifications.remove(code);}} catch (e) {// Silence is golden.}};const handleNotAllowedInCustomize = useCallback(() => {// Silence is golden.}, []);const BannerContext = BannerContextFactory.Context();return (<BannerContext.Providervalue={{layout: {...layout,// In customizer preview, always show animation independent of deviceanimationInOnlyMobile: false,animationOutOnlyMobile: false},decision: { ...decision },legal: { ...legal },design: { ...design },headerDesign: { ...headerDesign },bodyDesign: { ...bodyDesign },footerDesign: {...footerDesign,...{ poweredByLink: isPoweredByLinkDisabledByException ? false : footerDesign.poweredByLink }},texts: { ...texts },individualLayout: { ...individualLayout },saveButton: { ...saveButton },group: { ...group },individualTexts: { ...individualTexts },customCss: { ...customCss },mobile: { ...mobile },pageRequestUuid4,pageIdToPermalink,consentForwardingExternalHosts,poweredLink,pageId,pageByIdUrl,isTcf,ePrivacyUSA: isEPrivacyUSA,ageNotice: isAgeNotice,listServicesNotice: isListServicesNotice,tcf: tcfObject,tcfFilterBy,updateTcfFilterBy: (newFilter) => {setTcfFilterBy(newFilter);},groups,essentialGroup,visible,animationVisible,individualPrivacyOpen,previewCheckboxActiveState,updateIndividualPrivacyOpen: () => {alert(__('To customize please select an option from "Individual privacy settings".'));},gotHiddenDueLegal,i18n: bannerI18n,affiliate,consent: {groups: {}},didGroupFirstChange: false,updateGroupChecked: handleNotAllowedInCustomize,updateCookieChecked: handleNotAllowedInCustomize,onSave: handleNotAllowedInCustomize}}><Banner /></BannerContext.Provider>);})
Simply connects a mobx store to the banner itself. Usually, the visitor does not get any store, a simply context is used instead (see
banner.tsx).