SettingsFormGeneral:FC = observer(() => {const {optionStore: {imprintExternalUrl,imprintIsExternalUrl,privacyPolicyExternalUrl,privacyPolicyIsExternalUrl,others: { isPro, customizeBannerUrl }}} = useStores();const fnCustomizeSectionUrl = useCallback((id: string) =>`${customizeBannerUrl.replace(/autofocus\[panel]=[\w-]+/,`autofocus[section]=${id}`)}&return=${encodeURIComponent(window.location.href)}`,[customizeBannerUrl]);const customizeLegalUrl = fnCustomizeSectionUrl("real-cookie-banner-banner-legal");return (<><Form.ItemnoStyleshouldUpdate={(prevValues, nextValues) => prevValues.bannerActive !== nextValues.bannerActive}>{({ getFieldValue, setFieldsValue }) => {const bannerActive = getFieldValue("bannerActive") as boolean;return (<><Form.Item label={__("Cookie Banner/Dialog")}><Form.Item noStyle name="bannerActive" valuePropName="checked"><Switch style={{ display: bannerActive ? undefined : "none" }} /></Form.Item>{!bannerActive && (<Popconfirmtitle={__("I have already checked/will check all text in the cookie banner and content blocker myself. I have added missing information and corrected information that does not fit my use case.")}cancelText={__("Cancel")}okText={__("Activate now!")}overlayStyle={{ maxWidth: 450 }}onCancel={() => {setFieldsValue({ bannerActive: false });}}onConfirm={() => {setFieldsValue({ bannerActive: true });}}placement="bottomLeft"><Switch checked={false} /></Popconfirm>)}<p className="description" style={{ marginTop: 5 }}>{__("You can enable and disable the cookie banner. We recommend to activate the cookie banner on your website after you have added all services.")}</p></Form.Item><Form.Itemlabel={__("Content Blocker")}style={{ display: bannerActive ? undefined : "none" }}><Form.Item name="blockerActive" valuePropName="checked" noStyle><Switch style={{ marginTop: 5 }} /></Form.Item><p className="description" style={{ marginTop: 5 }}>{__("This feature allows you to block content that would process personal data and set cookies, but for which you do not yet have the visitor's consent.")}</p></Form.Item></>);}}</Form.Item><Form.Item label={__("Hide cookie banner on specific pages")}><p className="description" style={{ marginTop: 7 }}>{__("According to the ePrivacy Directive, legally required pages such as the privacy policy may be accessible without the user having to give consent to services and their cookies. Therefore, it is recommended to avoid processing personal data and setting cookies on these pages and not to display a cookie banner.")}</p><Form.Itemlabel={__("Imprint Page")}labelCol={{ span: 24 }}wrapperCol={{ span: 12 }}style={{ marginBottom: 12 }}>{imprintIsExternalUrl ? (<Inputvalue={imprintExternalUrl}readOnlyaddonAfter={<aclassName="button-link alignright"rel="noreferrer"target="_blank"href={customizeLegalUrl}>{__("Edit")}</a>}/>) : (<Form.Item name="imprintId" noStyle><PostTypeSelectpostType="pages"forceDefaultLanguagepostStatus={["publish"]}perPage={100}/></Form.Item>)}</Form.Item><Form.Itemlabel={__("Privacy policy page")}labelCol={{ span: 24 }}wrapperCol={{ span: 12 }}style={{ marginBottom: 12 }}>{privacyPolicyIsExternalUrl ? (<Inputvalue={privacyPolicyExternalUrl}readOnlyaddonAfter={<aclassName="button-link alignright"rel="noreferrer"target="_blank"href={customizeLegalUrl}>{__("Edit")}</a>}/>) : (<Form.Item name="privacyPolicyId" noStyle><PostTypeSelectpostType="pages"forceDefaultLanguagepostStatus={["publish"]}perPage={100}/></Form.Item>)}</Form.Item><Form.Itemlabel={<>{__("Hide on additional pages")} <ProTagtitle={__("Want to hide cookie banner on more pages?")}testDrivefeature="hide-page-ids"description={__("Cookie banners are legally necessary, but distract your users from the essentials. For example, on landing pages for advertising campaigns, they lead to lower conversion rates. On these pages, it can be useful to avoid processing personal data and setting cookies to keep the conversion rate high. You can hide the cookie banner on these pages.")}/></>}labelCol={{ span: 24 }}wrapperCol={{ span: 12 }}style={{ marginBottom: 12 }}><Form.Item name="hidePageIds" noStyle><PostTypeSelectpostType="pages"multipledisabled={!isPro}forceDefaultLanguagepostStatus={["publish"]}perPage={100}/></Form.Item></Form.Item></Form.Item><Form.Item label={__("Load services after consent via")}><Form.Item name="setCookiesViaManager" noStyle><Radio.Group><Radio.Button disabled={!isPro} value="none">{__("HTML/JavaScript Snippet")}</Radio.Button><Radio.Button disabled={!isPro} value="googleTagManager">{__("%s Event", LABEL_GTM)}</Radio.Button><Radio.Button disabled={!isPro} value="matomoTagManager">{__("%s Event", LABEL_MTM)}</Radio.Button></Radio.Group></Form.Item><div style={{ margin: "5px 0px 0px" }}><LearnMoreTagurl={__("https://devowl.io/knowledge-base/real-cookie-banner-with-google-tag-manager-or-matomo-tag-manager/")}/><ProTagtitle={__("Want to use a Tag Manager legally?")}testDrivefeature="set-cookies-via-manager"assetName={__("pro-modal/set-cookies-via-manager.png")}description={__("You can integrate services via Google Tag Manager or Matomo Tag Manager. At the same time, you can obtain and document consents via Real Cookie Banner in accordance with data protection regulations.")}/></div><p className="description"><strong>{__("You only need to change this option if you use Google Tag Manager or Matomo Tag Manager.")}</strong> {_i(__("If you opt-in to or opt-out from services, you will normally execute JavaScript code to ensure that scripts are enabled/disabled and cookies are set/removed on the visitor's client. If you are a Google Tag Manager or Matomo Tag Manager user, you can map this behavior by using tags that are triggered by an event in the data layer. For each service listed in this plugin, you will receive an additional field where you can specify the name of the event that is automatically triggered when the user opt-in or opt-out. We have a full integration for tag managers which should allow you to run it legally compliant in the EU."),{strong: <strong />})}</p></Form.Item></>);})