Const CookiePresetSelector
CookiePresetSelector: FC<{}> = observer(() => {const {cookieStore,optionStore: { allCookieCount }} = useStores();const { presetsCookie, busyPresetsCookie } = cookieStore;const [preset, setPreset] = useState<false | { identifier: string; version: number; overwriteAttributes?: any }>();const [loadingAttributes, setLoadingAttributes] = useState(false);const { logoUrl: cookieExpertsLogoUrl, openDialog: openCookieExperts } = useCookieExpertsModal();// Allow to force a preset by query argument so the preset selector is disabledconst { force, attributes: queryAttributes, navigateAfterCreation = true } = useLocationQuery();const handleLoadAttributes = useCallback(async (selectedIdentifier: string) => {setLoadingAttributes(true);const cookie = cookieStore.presetsCookie.get(selectedIdentifier);await cookie.fetchAttributes();const {data: { identifier, version }} = cookie;setPreset({identifier,version,overwriteAttributes: queryAttributes ? JSON.parse(queryAttributes) : {}});setLoadingAttributes(false);},[cookieStore]);const handleOnSelect: ComponentProps<typeof PresetSelector>["onSelect"] = useCallback((attributes) => {if (attributes === false) {setPreset(false);} else {handleLoadAttributes(attributes.identifier);}},[handleLoadAttributes]);useEffect(() => {async function fetch() {await cookieStore.fetchPresetsCookie();if (force) {if (force === "scratch") {setPreset(queryAttributes? {overwriteAttributes: JSON.parse(queryAttributes),identifier: undefined,version: undefined}: false);} else {handleLoadAttributes(force);}}}fetch();}, []);return preset === undefined ? (<ConfigContent>{force ? (<Spin spinning />) : (<Spin spinning={loadingAttributes}><PresetSelectortype="cookie"presets={Array.from(presetsCookie.values()).map(// eslint-disable-next-line @typescript-eslint/no-unused-vars({ data: { logoFile, ...preset }, fullLogoUrl }) => ({...preset,logoUrl: fullLogoUrl}))}fetchingPresets={busyPresetsCookie}onSelect={handleOnSelect}quickLinks={[{id: "from-scratch",cover: <PlusOutlined style={{ paddingTop: 25, fontSize: 70 }} />,title: __("Create from scratch"),description: __("an individual service"),onClick: () => handleOnSelect(false)},{id: "scanner",cover: <SearchOutlined style={{ paddingTop: 25, fontSize: 70 }} />,title: __("Scan website"),description: __("and find used service"),onClick: () => (window.location.hash = "#/scanner")},{id: "cookie-experts",cover: (<imgsrc={cookieExpertsLogoUrl}style={{ display: "block", paddingTop: 15, margin: "auto", height: 95 }}/>),title: "Cookie Experts",description: __("help you with the setup"),onClick: openCookieExperts}]}><h1 style={{ margin: "20px 0" }}>{__("...or create it from one of our templates")}</h1>{allCookieCount < 3 && (<><br /><LearnMoreTagurl={__("https://devowl.io/knowledge-base/real-cookie-banner-find-all-cookies/")}label={__("How do I find all services (cookies) on my website?")}style={{ marginBottom: 10 }}/></>)}</PresetSelector></Spin>)}</ConfigContent>) : (<ConfigContent maxWidth="fixed"><CookieEditFormpreset={preset === false? undefined: {identifier: preset.identifier,version: preset.version}}navigateAfterCreation={navigateAfterCreation}overwriteAttributes={preset === false ? undefined : preset.overwriteAttributes}/></ConfigContent>);})