Const SettingsForm
SettingsForm: FC<{}> = observer(() => {const { params, path } = useRouteMatch<{ tab: string }>();const [hasChanges, setHasChanges] = useState(false);const tab = params.tab || "";const history = useHistory();const [form] = Form.useForm();const { optionStore, checklistStore } = useStores();const firstTimeSave = useMemo(() => checklistStore.items.filter(({ id }) => id === "save-settings")[0]?.checked === false,[checklistStore]);const {busySettings,bannerActive,blockerActive,imprintId,privacyPolicyId,hidePageIds,setCookiesViaManager,acceptAllForBots,respectDoNotTrack,// onlyEuCookieBanner,cookieDuration,saveIp,ePrivacyUSA,ageNotice,listServicesNotice,consentForwarding,forwardTo,crossDomains,affiliateLink,affiliateLabelBehind,affiliateLabelDescription,countryBypass,countryBypassCountries,countryBypassType,tcf,tcfPublisherCc,tcfAcceptedTime,tcfScopeOfConsent,consentDuration,consentsDeletedAt} = optionStore;const initialValues = {bannerActive,blockerActive,imprintId,privacyPolicyId,hidePageIds: [...hidePageIds],setCookiesViaManager,acceptAllForBots,respectDoNotTrack,// onlyEuCookieBanner,cookieDuration,saveIp,ePrivacyUSA,ageNotice,listServicesNotice,consentForwarding,forwardTo: [...forwardTo],crossDomains,affiliateLink,affiliateLabelBehind,affiliateLabelDescription,countryBypass: !!countryBypass,countryBypassCountries: [...countryBypassCountries],countryBypassType: countryBypassType,// Automatically check boxes if already activecountryBypassCheckboxTerms: !!countryBypass,countryBypassCheckboxAccuracy: !!countryBypass,tcf: !!tcf,tcfPublisherCc,// Automatically check boxes if already activetcfCheckboxTerms: !!tcfAcceptedTime && tcf,tcfCheckboxVisually: !!tcfAcceptedTime && tcf,tcfCheckboxIllegal: !!tcfAcceptedTime && tcf,tcfScopeOfConsent,consentDuration,consentsDeletedAt};const handleSave = useCallback(async () => {const values = form.getFieldsValue() as typeof initialValues;await optionStore.updateSettings({ ...initialValues, ...values });message.success(__("Successfully updated settings!"));setHasChanges(false);// When TCF compatibility gets deactivated, the user needs to recheck the policies and termsif (!values.tcf) {form.setFieldsValue({tcfCheckboxTerms: false,tcfCheckboxVisually: false,tcfCheckboxIllegal: false});}// When Country Bypass compatibility gets deactivated, the user needs to recheck the policies and termsif (!values.countryBypass) {form.setFieldsValue({countryBypassCheckboxTerms: false,countryBypassCheckboxAccuracy: false});}// Automatically redirect to next tab after first change of settingsif (firstTimeSave) {const tabs = ["", "consent", "country-bypass"];const currentIdx = tabs.indexOf(tab);if (currentIdx > -1 && tabs[currentIdx + 1]) {history.push(path.replace(":tab?", tabs[currentIdx + 1]));}}}, [form, optionStore, initialValues, firstTimeSave, tab]);const handleBeforeUnload: ComponentProps<typeof Prompt>["message"] = useCallback(({ pathname }: { pathname: string }) => {if (pathname.startsWith("/settings/") || !hasChanges) {return true;}return __('You have unsaved changes. If you click on "confirm", your changes will be discarded.');},[form, initialValues]);return (<Spin spinning={busySettings}><Formname="settings"initialValues={initialValues}form={form}{...LAYOUT}onFinish={handleSave}onValuesChange={() => setHasChanges(true)}><Prompt message={handleBeforeUnload} /><Form.Item noStyle labelCol={{ span: 0 }} wrapperCol={{ span: 24 }}><RouteSwitch><><TabsactiveKey={tab}onTabClick={(key) => {history.push(path.replace(":tab?", key));}}><TabPane tab={__("General")} key=""><ConfigContent maxWidth="fixed"><SettingsFormGeneral /><SettingsFormFooter /></ConfigContent></TabPane><TabPane tab={__("Consent")} key="consent"><ConfigContent maxWidth="fixed"><SettingsFormConsent /><SettingsFormFooter /></ConfigContent></TabPane><TabPane tab={__("Geo-restriction")} key="country-bypass"><ConfigContent maxWidth="fixed"><SettingsFormCountryBypass /><SettingsFormFooter /></ConfigContent></TabPane><TabPane tab={__("TCF Compatibility")} key="tcf"><ConfigContent maxWidth="fixed"><SettingsFormTCF /><SettingsFormFooter /></ConfigContent></TabPane><TabPane tab={__("Multisite / Consent Forwarding")} key="multisite"><ConfigContent maxWidth="fixed"><SettingsFormMultisite /><SettingsFormFooter /></ConfigContent></TabPane>{process.env.PLUGIN_CTX === "pro" && tab === "affiliate" && (<TabPane tab={__("Affiliate")} key="affiliate"><ConfigContent maxWidth="fixed"><SettingsFormAffiliate /><SettingsFormFooter /></ConfigContent></TabPane>)}</Tabs></></RouteSwitch></Form.Item></Form></Spin>);})