{"version":3,"sources":["../../../src/payouts/elements/status-banner.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tStatusBannerElementOptions,\n\tStatusBannerType,\n} from \"@whop/embedded-components-vanilla-js/types\";\n\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"../session\";\n\nexport function StatusBannerElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tonVerifyClick,\n\tonBannerChange,\n\tfallback,\n}: {\n\toptions?: StatusBannerElementOptions;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tonVerifyClick?: (ev: CustomEvent) => void;\n\tonBannerChange?: (ev: CustomEvent, bannerType: StatusBannerType) => void;\n\tfallback?: React.ReactNode;\n}) {\n\tconst payoutsSession = usePayoutsSession();\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst element = useMemo(() => {\n\t\tif (!payoutsSession) return null;\n\t\tconst createdElement = payoutsSession.createElement(\n\t\t\tStatusBannerElement,\n\t\t\toptions,\n\t\t);\n\t\treturn createdElement;\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [payoutsSession]);\n\n\tconst elementSnapshot = useElementSnapshot(element);\n\n\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\tuseEffect(() => {\n\t\tif (!element) return;\n\t\telement.updateOptions(options);\n\t}, [options, element]);\n\n\tuseEffect(() => {\n\t\tif (!element || !onReady) return;\n\t\telement.on(\"ready\", onReady);\n\t\treturn () => {\n\t\t\telement.off(\"ready\", onReady);\n\t\t};\n\t}, [element, onReady]);\n\n\tuseEffect(() => {\n\t\tif (!element || !onVerifyClick) return;\n\t\telement.on(\"verifyClick\", onVerifyClick);\n\t\treturn () => {\n\t\t\telement.off(\"verifyClick\", onVerifyClick);\n\t\t};\n\t}, [element, onVerifyClick]);\n\n\tuseEffect(() => {\n\t\tif (!element || !onBannerChange) return;\n\t\telement.on(\"bannerChange\", onBannerChange);\n\t\treturn () => {\n\t\t\telement.off(\"bannerChange\", onBannerChange);\n\t\t};\n\t}, [element, onBannerChange]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!element || !ref.current) return;\n\t\telement.mount(ref.current);\n\t\treturn () => {\n\t\t\telement.unmount();\n\t\t};\n\t}, [element, ref.current]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\tclassName={className}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t\t{!isReady && (fallback ?? null)}\n\t\t</>\n\t);\n}\n\nStatusBannerElement.displayName = \"StatusBannerElement\";\nStatusBannerElement.type = \"status-banner-element\" as const;\n"],"mappings":";;AAOA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAE3B,SAAS,oBAAoB;AAAA,EACnC,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAQG;AACF,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,UAAU,QAAQ,MAAM;AAC7B,QAAI,CAAC,eAAgB,QAAO;AAC5B,UAAM,iBAAiB,eAAe;AAAA,MACrC;AAAA,MACA;AAAA,IACD;AACA,WAAO;AAAA,EAER,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,kBAAkB,mBAAmB,OAAO;AAElD,QAAM,UAAU,iBAAiB,UAAU;AAE3C,YAAU,MAAM;AACf,QAAI,CAAC,QAAS;AACd,YAAQ,cAAc,OAAO;AAAA,EAC9B,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,YAAU,MAAM;AACf,QAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,YAAQ,GAAG,SAAS,OAAO;AAC3B,WAAO,MAAM;AACZ,cAAQ,IAAI,SAAS,OAAO;AAAA,IAC7B;AAAA,EACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,YAAU,MAAM;AACf,QAAI,CAAC,WAAW,CAAC,cAAe;AAChC,YAAQ,GAAG,eAAe,aAAa;AACvC,WAAO,MAAM;AACZ,cAAQ,IAAI,eAAe,aAAa;AAAA,IACzC;AAAA,EACD,GAAG,CAAC,SAAS,aAAa,CAAC;AAE3B,YAAU,MAAM;AACf,QAAI,CAAC,WAAW,CAAC,eAAgB;AACjC,YAAQ,GAAG,gBAAgB,cAAc;AACzC,WAAO,MAAM;AACZ,cAAQ,IAAI,gBAAgB,cAAc;AAAA,IAC3C;AAAA,EACD,GAAG,CAAC,SAAS,cAAc,CAAC;AAE5B,kBAAgB,MAAM;AACrB,QAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,YAAQ,MAAM,IAAI,OAAO;AACzB,WAAO,MAAM;AACZ,cAAQ,QAAQ;AAAA,IACjB;AAAA,EACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,SACC,0DACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,MAC9D;AAAA,MACA;AAAA;AAAA,EACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAEF;AAEA,oBAAoB,cAAc;AAClC,oBAAoB,OAAO;","names":[]}