{"version":3,"sources":["../../src/payouts/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tPayoutsSessionElements,\n\tWhopElement,\n} from \"@whop/embedded-components-vanilla-js/types\";\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"./session\";\n\n/**\n * Valid element type strings that can be passed to createElement.\n */\ntype ElementType = keyof PayoutsSessionElements;\n\n/**\n * Extract the options type for a given element type using indexed access.\n * PayoutsSessionElements maps element types to [Options, Element] tuples.\n */\ntype ElementOptionsFor<T extends ElementType> = PayoutsSessionElements[T][0];\n\n/**\n * Base element type that all created elements conform to.\n * Using WhopElement<any, any, any> gives us access to common methods\n * (mount, unmount, on, off, updateOptions) without union type issues.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype BaseElement = WhopElement<any, any, any>;\n\n/**\n * Component definition with a constrained element type.\n * The type must be a valid element type from the SDK.\n */\ninterface ElementComponentDefinition<T extends ElementType = ElementType> {\n\tdisplayName: string;\n\ttype: T;\n}\n\ninterface WithFallbackPropsBase {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}\n\nexport interface WithFallbackPropsRequired<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<\n\tTOptions,\n> extends WithFallbackPropsBase {\n\toptions?: TOptions;\n}\n\ntype WithFallbackComponent<TOptions, TRequired extends boolean> = {\n\t(\n\t\tprops: TRequired extends true\n\t\t\t? WithFallbackPropsRequired<TOptions>\n\t\t\t: WithFallbackPropsOptional<TOptions>,\n\t): React.ReactNode;\n\tdisplayName: string;\n\ttype: string;\n};\n\n/**\n * Creates a React component that wraps an embedded element with fallback support.\n *\n * @example\n * ```tsx\n * // Type-safe: options type is inferred from the element type\n * export const BalanceElement = withFallback({\n *   displayName: \"BalanceElement\",\n *   type: \"balance-element\",\n * } as const);\n *\n * // Usage - TypeScript knows the correct options type\n * <BalanceElement options={{ hidePendingBalance: true }} />\n * ```\n */\nexport function withFallback<\n\tconst T extends ElementType,\n\tTRequired extends boolean = false,\n>(\n\tComponent: ElementComponentDefinition<T>,\n): WithFallbackComponent<ElementOptionsFor<T>, TRequired> {\n\ttype TOptions = ElementOptionsFor<T>;\n\n\tfunction WrappedElement({\n\t\toptions,\n\t\tclassName,\n\t\tstyle,\n\t\tonReady,\n\t\tfallback,\n\t}: WithFallbackPropsOptional<TOptions>) {\n\t\tconst payoutsSession = usePayoutsSession();\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tconst element = useMemo((): BaseElement | null => {\n\t\t\tif (!payoutsSession) return null;\n\t\t\t// Safe: T is constrained to valid element types, and options matches T\n\t\t\treturn payoutsSession.createElement(Component, options ?? {});\n\t\t}, [payoutsSession]);\n\n\t\tconst elementSnapshot = useElementSnapshot(element);\n\n\t\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\t\tuseEffect(() => {\n\t\t\tif (!element) return;\n\t\t\telement.updateOptions(options ?? {});\n\t\t}, [options, element]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!element || !onReady) return;\n\t\t\telement.on(\"ready\", onReady);\n\t\t\treturn () => {\n\t\t\t\telement.off(\"ready\", onReady);\n\t\t\t};\n\t\t}, [element, onReady]);\n\n\t\tuseLayoutEffect(() => {\n\t\t\tif (!element || !ref.current) return;\n\t\t\telement.mount(ref.current);\n\t\t\treturn () => {\n\t\t\t\telement.unmount();\n\t\t\t};\n\t\t}, [element, ref.current]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t\t{!isReady && (fallback ?? null)}\n\t\t\t</>\n\t\t);\n\t}\n\n\tWrappedElement.displayName = Component.displayName;\n\tWrappedElement.type = Component.type;\n\n\treturn WrappedElement as WithFallbackComponent<TOptions, TRequired>;\n}\n"],"mappings":";;AAMA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AA0E3B,SAAS,aAIf,WACyD;AAGzD,WAAS,eAAe;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,GAAwC;AACvC,UAAM,iBAAiB,kBAAkB;AACzC,UAAM,MAAM,OAAuB,IAAI;AAEvC,UAAM,UAAU,QAAQ,MAA0B;AACjD,UAAI,CAAC,eAAgB,QAAO;AAE5B,aAAO,eAAe,cAAc,WAAW,WAAW,CAAC,CAAC;AAAA,IAC7D,GAAG,CAAC,cAAc,CAAC;AAEnB,UAAM,kBAAkB,mBAAmB,OAAO;AAElD,UAAM,UAAU,iBAAiB,UAAU;AAE3C,cAAU,MAAM;AACf,UAAI,CAAC,QAAS;AACd,cAAQ,cAAc,WAAW,CAAC,CAAC;AAAA,IACpC,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,cAAU,MAAM;AACf,UAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,cAAQ,GAAG,SAAS,OAAO;AAC3B,aAAO,MAAM;AACZ,gBAAQ,IAAI,SAAS,OAAO;AAAA,MAC7B;AAAA,IACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,oBAAgB,MAAM;AACrB,UAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,cAAQ,MAAM,IAAI,OAAO;AACzB,aAAO,MAAM;AACZ,gBAAQ,QAAQ;AAAA,MACjB;AAAA,IACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,WACC,0DACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,QAC9D;AAAA,QACA;AAAA;AAAA,IACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAAA,EAEF;AAEA,iBAAe,cAAc,UAAU;AACvC,iBAAe,OAAO,UAAU;AAEhC,SAAO;AACR;","names":[]}