fix gosuslugi

package-lock.json

@@ -12,6 +12,7 @@
                 "@radix-ui/react-navigation-menu": "^1.0.0",
                 "@radix-ui/react-tooltip": "^1.0.0",
                 "classnames": "^2.2.6",
+                "dangerously-set-html-content": "^1.0.13",
                 "date-fns": "^2.29.0",
                 "markdown-it": "^13.0.1",
                 "next": "^13.4.0",
@@ -1335,6 +1336,17 @@
             "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
             "dev": true
         },
+        "node_modules/dangerously-set-html-content": {
+            "version": "1.0.13",
+            "resolved": "https://registry.npmjs.org/dangerously-set-html-content/-/dangerously-set-html-content-1.0.13.tgz",
+            "integrity": "sha512-C/6Rm8L3BgjFX0ugETpWS3MyrRqTycVbqlSKDhqeoMaZAfCw2Xx1qcj4CYGnZnn61tCJ3JZdHnWCcNEXvhh4sA==",
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "react": "^18.2.0"
+            }
+        },
         "node_modules/date-fns": {
             "version": "2.29.3",
             "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
@@ -5534,6 +5546,12 @@
             "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
             "dev": true
         },
+        "dangerously-set-html-content": {
+            "version": "1.0.13",
+            "resolved": "https://registry.npmjs.org/dangerously-set-html-content/-/dangerously-set-html-content-1.0.13.tgz",
+            "integrity": "sha512-C/6Rm8L3BgjFX0ugETpWS3MyrRqTycVbqlSKDhqeoMaZAfCw2Xx1qcj4CYGnZnn61tCJ3JZdHnWCcNEXvhh4sA==",
+            "requires": {}
+        },
         "date-fns": {
             "version": "2.29.3",
             "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",

package.json

@@ -22,6 +22,7 @@
         "@radix-ui/react-navigation-menu": "^1.0.0",
         "@radix-ui/react-tooltip": "^1.0.0",
         "classnames": "^2.2.6",
+        "dangerously-set-html-content": "^1.0.13",
         "date-fns": "^2.29.0",
         "markdown-it": "^13.0.1",
         "next": "^13.4.0",

src/components/Gosuslugi/index.tsx

@@ -1,14 +1,23 @@
 import { useEffect } from "react"
 import { getCode } from "./lib"
+import InnerHTML from "dangerously-set-html-content"
 
 export type GosuslugiProps = {}
 
 export const Gosuslugi: React.FC<GosuslugiProps> = () => {
     useEffect(() => {
-        window.dispatchEvent(new Event("resize"))
-    })
+        const id = setTimeout(() => {
+            // This call taken from getCode <script>Widget("https://pos.gosuslugi.ru/form", 312519)</script>
+            (window as any).Widget("https://pos.gosuslugi.ru/form", 312519)
+        }, 100)
+
+        return () => {
+            clearTimeout(id)
+        }
+    }, [])
 
     return (
-        <div dangerouslySetInnerHTML={{ __html: getCode() }} />
+        <InnerHTML html={getCode()} />
     )
 }
+

src/components/Gosuslugi/lib.ts

@@ -45,5 +45,4 @@ export const getCode = () => `
   "use strict";function ownKeys(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);if(t)o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable});n.push.apply(n,o)}return n}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};if(t%2)ownKeys(Object(n),true).forEach(function(t){_defineProperty(e,t,n[t])});else if(Object.getOwnPropertyDescriptors)Object.defineProperties(e,Object.getOwnPropertyDescriptors(n));else ownKeys(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function _defineProperty(e,t,n){if(t in e)Object.defineProperty(e,t,{value:n,enumerable:true,configurable:true,writable:true});else e[t]=n;return e}var POS_PREFIX_23="--pos-banner-fluid-23__",posOptionsInitialBanner23={background:"#ffffff","grid-template-columns":"100%","grid-template-rows":"262px auto","max-width":"100%","text-font-size":"20px","text-margin":"0 0 24px 0","button-wrap-max-width":"100%","bg-url":"url('https://pos.gosuslugi.ru/bin/banner-fluid/18/banner-fluid-bg-18-2.svg')","bg-url-position":"right bottom","content-padding":"26px 24px 24px","content-grid-row":"0","logo-wrap-padding":"16px 12px 12px","logo-width":"65px","logo-wrap-top":"0","logo-wrap-left":"0","slogan-font-size":"12px"},setStyles=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:POS_PREFIX_23;Object.keys(e).forEach(function(o){t.style.setProperty(n+o,e[o])})},removeStyles=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:POS_PREFIX_23;Object.keys(e).forEach(function(e){t.style.removeProperty(n+e)})};function changePosBannerOnResize(){var e=document.documentElement,t=_objectSpread({},posOptionsInitialBanner23),n=document.getElementById("js-show-iframe-wrapper"),o=n?n.offsetWidth:document.body.offsetWidth;if(o>340)t["button-wrap-max-width"]="209px";if(o>482)t["content-padding"]="24px",t["text-font-size"]="24px";if(o>568)t["grid-template-columns"]="1fr 292px",t["grid-template-rows"]="100%",t["content-grid-row"]="1",t["content-padding"]="32px 24px",t["bg-url-position"]="calc(100% + 35px) bottom";if(o>610)t["bg-url-position"]="calc(100% + 12px) bottom";if(o>726)t["bg-url-position"]="right bottom";if(o>783)t["grid-template-columns"]="1fr 390px";if(o>820)t["grid-template-columns"]="1fr 420px",t["bg-url-position"]="right bottom";if(o>1098)t["bg-url"]="url('https://pos.gosuslugi.ru/bin/banner-fluid/18/banner-fluid-bg-18-3.svg')",t["bg-url-position"]="calc(100% + 55px) bottom",t["grid-template-columns"]="1fr 557px",t["text-font-size"]="32px",t["content-padding"]="32px 32px 32px 50px",t["logo-width"]="78px",t["slogan-font-size"]="15px",t["logo-wrap-padding"]="20px 16px 16px";if(o>1422)t["max-width"]="1422px",t["grid-template-columns"]="1fr 720px",t["content-padding"]="32px 48px 32px 160px",t.background="linear-gradient(90deg, #ffffff 50%, #f8efec 50%)";setStyles(t,e)}changePosBannerOnResize(),window.addEventListener("resize",changePosBannerOnResize),window.onunload=function(){var e=document.documentElement,t=_objectSpread({},posOptionsInitialBanner23);window.removeEventListener("resize",changePosBannerOnResize),removeStyles(t,e)};
 })()
 </script>
-<script>Widget("https://pos.gosuslugi.ru/form", 312519)</script>
 `