Const BlockerEditForm
BlockerEditForm: FC<{ cookieCreationPrompt?: boolean; navigateAfterCreation?: boolean | string; overwriteAttributes?: BlockerPreset["attributes"]; preset?: { identifier: string; version: number } }> = observer(({ preset, overwriteAttributes, navigateAfterCreation = true, cookieCreationPrompt = false }) => {const { blocker, id, queried, fetched, link } = useRouteBlocker();const history = useHistory();const [isCreatingNewCookie, setIsCreatingNewCookie] = useState(false);const {cookieStore,optionStore: {tcf,others: { isPro }}} = useStores();const presetModel = blocker?.presetModel || cookieStore.presetsBlocker.get(preset?.identifier);const attributes = { ...presetModel?.attributes, ...overwriteAttributes };const {form,isBusy,defaultValues,nonExistingServices,onFinish,onFinishFailed,onBeforeUnload,onValuesChange,contextValue} = useFormContentBlockerHandler({__,_i,attributes,isTcf: tcf,preset: presetModel? {identifier: presetModel.data.identifier,version: presetModel.data.version}: undefined,initialHasChanges: cookieCreationPrompt,handleSave: async (values) => {try {const { name, status, description, ...meta } = values;const newMeta = {...meta,visualMediaThumbnail: meta.visualMediaThumbnail || 0,criteria: meta.criteria,tcfVendors: meta.tcfVendors?.join(",") || "",services: meta.services?.join(",") || "",isVisual: meta.criteria === "services" ? meta.isVisual : false,presetId: presetModel?.data.identifier,presetVersion: presetModel?.data.version};delete newMeta.presetCheck;if (queried) {blocker.setName(name);blocker.setStatus(status);blocker.setDescription(description);blocker.setMeta(newMeta);await blocker.patch();} else {const draft = new BlockerModel(blockers, {title: {rendered: name},content: {rendered: description,protected: false},status,meta: newMeta});await draft.persist();}navigateAfterCreation &&setTimeout(() =>typeof navigateAfterCreation === "string"? (window.location.href = navigateAfterCreation): history.push(link.slice(1)),0);} catch (e) {throw (e as any).responseJSON.message;}}});const { blockers, essentialGroup } = cookieStore;const { openDialog: openCookieExperts } = useCookieExpertsModal();const initialValues: FormContentBlockerValueProps = fetched? {name: blocker.data.title.raw,status: blocker.data.status as FormContentBlockerValueProps["status"],description: blocker.data.content.raw,criteria: blocker.data.meta.criteria as BlockerModel["data"]["meta"]["criteria"],rules: blocker.data.meta.rules,tcfVendors: blocker.tcfVendors,services: blocker.services,isVisual: blocker.data.meta.isVisual,visualType: isPro ? blocker.data.meta.visualType : "default",visualMediaThumbnail: blocker.data.meta.visualMediaThumbnail,visualContentType: blocker.data.meta.visualContentType,isVisualDarkMode: blocker.data.meta.isVisualDarkMode,visualBlur: blocker.data.meta.visualBlur,visualDownloadThumbnail: blocker.data.meta.visualDownloadThumbnail,visualHeroButtonText: blocker.data.meta.visualHeroButtonText,shouldForceToShowVisual: blocker.data.meta.shouldForceToShowVisual,presetCheck: undefined}: defaultValues;// Automatically add created presets to the dropdownconst handleCreatedPreset: ComponentProps<typeof BlockerFormNoticeNoneExistingCookies>["onCreated"] = useCallback((model) => {form.setFieldsValue({services: [...form.getFieldValue("services"), model.key]});},[form]);// Initially load the blocker if not yet doneuseEffect(() => {if (queried && !fetched) {blockers.getSingle({params: {id,context: "edit"}});}}, [queried, fetched]);useEffect(() => {if (presetModel && !presetModel.attributes && !presetModel.busy) {presetModel.fetchAttributes();}}, [presetModel]);// Scroll to top when opening the formuseEffect(() => {scrollTo(0);// Ensure the groups are loadedif (!essentialGroup) {cookieStore.fetchGroups();}}, []);const proModalVisualContentBlocker = useProModalVisualContentBlocker();const FormContentBlockerContext = FormContentBlockerContextFactory.Context();if ((queried && !fetched) || (presetModel && !presetModel.attributes)) {return <Skeleton active paragraph={{ rows: 8 }} />;}const isTemplateUpdate =fetched && presetModel ? blocker.data?.meta?.presetVersion !== presetModel.data.version : false;return (<FormContentBlockerContext.Providervalue={{...contextValue,isPro,isEdit: fetched,isTemplateUpdate,proModals: { visual: proModalVisualContentBlocker },openCookieExperts,presetCheck: presetModel ? isTemplateUpdate || !fetched : false}}><Spin spinning={isBusy || presetModel?.busy || false}><Prompt message={onBeforeUnload} /><Formname={`blocker-${id}`}form={form}{...FormContentBlockerLayout}initialValues={initialValues}onFinish={onFinish}onFinishFailed={onFinishFailed}onValuesChange={onValuesChange}><FormContentBlockertechnicalProps={{servicesFieldProps: {dropdown: (<PostTypeSelectpostType="rcb-cookie"multiplefilter={(d) => (d as any)["rcb-cookie-group"][0] !== essentialGroup?.key}/>),children: (<><buttontype="button"className="button"onClick={() => setIsCreatingNewCookie(true)}>{__("Create new service")}</button><Modalkey={id}visible={isCreatingNewCookie}title={__("Add service")}width="calc(100% - 50px)"bodyStyle={{ paddingBottom: 0 }}footer={null}onCancel={() => setIsCreatingNewCookie(false)}><CookieEditFormnavigateAfterCreation={false}scrollToTop={false}onCreated={(model) => {setIsCreatingNewCookie(false);handleCreatedPreset(model);}}/></Modal><BlockerFormNoticeNoneExistingCookiesnonExistingServices={nonExistingServices}onCreated={handleCreatedPreset}/></>)},tcfVendorsFieldProps: {dropdown: (<PostTypeSelectpostType="rcb-tcf-vendor-conf"multipletitleRender={(({ vendor: { name } }: TcfVendorConfigurationModel["data"]) => name) as any}/>)}}}visualProps={{visualMediaThumbnailPicker: (<MediaLibrarySelectortitle={__("Select preview image")}allowedTypes={["image"]}render={({ open, reset, attachmentId, url }) => (<><p style={{ marginTop: 0 }}><a className="button" onClick={open}>{attachmentId? __("Replace image"): __("Select from media library")}</a> {attachmentId && (<a className="button" onClick={reset}>{__("Remove image")}</a>)}</p>{url && <Image width={272} src={url} />}</>)}/>)}}/></Form></Spin></FormContentBlockerContext.Provider>);})