@whop/embedded-components-react-js 0.0.5-beta.1 → 0.0.5-beta.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/dist/index.d.ts +3 -0
  2. package/dist/lib/with-fallback.d.ts +55 -0
  3. package/dist/lib/with-fallback.js +85 -0
  4. package/dist/lib/with-fallback.js.map +1 -0
  5. package/dist/lib/with-fallback.mjs +58 -0
  6. package/dist/lib/with-fallback.mjs.map +1 -0
  7. package/dist/payouts/elements/balance.d.ts +8 -13
  8. package/dist/payouts/elements/balance.js +5 -61
  9. package/dist/payouts/elements/balance.js.map +1 -1
  10. package/dist/payouts/elements/balance.mjs +5 -53
  11. package/dist/payouts/elements/balance.mjs.map +1 -1
  12. package/dist/payouts/elements/bnpl-reserve-balance-breakdown.d.ts +8 -13
  13. package/dist/payouts/elements/bnpl-reserve-balance-breakdown.js +5 -61
  14. package/dist/payouts/elements/bnpl-reserve-balance-breakdown.js.map +1 -1
  15. package/dist/payouts/elements/bnpl-reserve-balance-breakdown.mjs +5 -53
  16. package/dist/payouts/elements/bnpl-reserve-balance-breakdown.mjs.map +1 -1
  17. package/dist/payouts/elements/change-account-country.d.ts +8 -13
  18. package/dist/payouts/elements/change-account-country.js +5 -61
  19. package/dist/payouts/elements/change-account-country.js.map +1 -1
  20. package/dist/payouts/elements/change-account-country.mjs +5 -53
  21. package/dist/payouts/elements/change-account-country.mjs.map +1 -1
  22. package/dist/payouts/elements/generate-withdrawal-receipt.d.ts +11 -0
  23. package/dist/payouts/elements/generate-withdrawal-receipt.js +30 -0
  24. package/dist/payouts/elements/generate-withdrawal-receipt.js.map +1 -0
  25. package/dist/payouts/elements/generate-withdrawal-receipt.mjs +8 -0
  26. package/dist/payouts/elements/generate-withdrawal-receipt.mjs.map +1 -0
  27. package/dist/payouts/elements/index.d.ts +3 -0
  28. package/dist/payouts/elements/index.js +2 -0
  29. package/dist/payouts/elements/index.js.map +1 -1
  30. package/dist/payouts/elements/index.mjs +2 -0
  31. package/dist/payouts/elements/index.mjs.map +1 -1
  32. package/dist/payouts/elements/pending-balance-breakdown.d.ts +8 -13
  33. package/dist/payouts/elements/pending-balance-breakdown.js +5 -61
  34. package/dist/payouts/elements/pending-balance-breakdown.js.map +1 -1
  35. package/dist/payouts/elements/pending-balance-breakdown.mjs +5 -53
  36. package/dist/payouts/elements/pending-balance-breakdown.mjs.map +1 -1
  37. package/dist/payouts/elements/regular-reserve-balance-breakdown.d.ts +8 -13
  38. package/dist/payouts/elements/regular-reserve-balance-breakdown.js +5 -61
  39. package/dist/payouts/elements/regular-reserve-balance-breakdown.js.map +1 -1
  40. package/dist/payouts/elements/regular-reserve-balance-breakdown.mjs +5 -53
  41. package/dist/payouts/elements/regular-reserve-balance-breakdown.mjs.map +1 -1
  42. package/dist/payouts/elements/reset-account.d.ts +8 -13
  43. package/dist/payouts/elements/reset-account.js +5 -61
  44. package/dist/payouts/elements/reset-account.js.map +1 -1
  45. package/dist/payouts/elements/reset-account.mjs +5 -53
  46. package/dist/payouts/elements/reset-account.mjs.map +1 -1
  47. package/dist/payouts/elements/status-banner.d.ts +18 -0
  48. package/dist/payouts/elements/status-banner.js +102 -0
  49. package/dist/payouts/elements/status-banner.js.map +1 -0
  50. package/dist/payouts/elements/status-banner.mjs +76 -0
  51. package/dist/payouts/elements/status-banner.mjs.map +1 -0
  52. package/dist/payouts/elements/total-balance-breakdown.d.ts +8 -13
  53. package/dist/payouts/elements/total-balance-breakdown.js +5 -61
  54. package/dist/payouts/elements/total-balance-breakdown.js.map +1 -1
  55. package/dist/payouts/elements/total-balance-breakdown.mjs +5 -53
  56. package/dist/payouts/elements/total-balance-breakdown.mjs.map +1 -1
  57. package/dist/payouts/elements/verify.d.ts +8 -13
  58. package/dist/payouts/elements/verify.js +5 -58
  59. package/dist/payouts/elements/verify.js.map +1 -1
  60. package/dist/payouts/elements/verify.mjs +5 -53
  61. package/dist/payouts/elements/verify.mjs.map +1 -1
  62. package/dist/payouts/elements/withdraw-button.d.ts +8 -13
  63. package/dist/payouts/elements/withdraw-button.js +5 -61
  64. package/dist/payouts/elements/withdraw-button.js.map +1 -1
  65. package/dist/payouts/elements/withdraw-button.mjs +5 -53
  66. package/dist/payouts/elements/withdraw-button.mjs.map +1 -1
  67. package/dist/payouts/elements/withdrawal-breakdown.d.ts +8 -13
  68. package/dist/payouts/elements/withdrawal-breakdown.js +5 -61
  69. package/dist/payouts/elements/withdrawal-breakdown.js.map +1 -1
  70. package/dist/payouts/elements/withdrawal-breakdown.mjs +5 -53
  71. package/dist/payouts/elements/withdrawal-breakdown.mjs.map +1 -1
  72. package/dist/payouts/elements/withdrawals.d.ts +8 -13
  73. package/dist/payouts/elements/withdrawals.js +5 -61
  74. package/dist/payouts/elements/withdrawals.js.map +1 -1
  75. package/dist/payouts/elements/withdrawals.mjs +5 -53
  76. package/dist/payouts/elements/withdrawals.mjs.map +1 -1
  77. package/dist/payouts/index.d.ts +3 -0
  78. package/package.json +2 -2
  79. package/package.json.temp +0 -44
@@ -1,56 +1,8 @@
1
1
  "use client";
2
2
  import "../../chunk-NSSMTXJJ.mjs";
3
- import React, { useEffect, useLayoutEffect, useMemo, useRef } from "react";
4
- import { useElementSnapshot } from "../../lib/use-element-snapshot.mjs";
5
- import { usePayoutsSession } from "../session.mjs";
6
- function WithdrawalBreakdownElement({ options, className, style, onReady, fallback }) {
7
- const payoutsSession = usePayoutsSession();
8
- const ref = useRef(null);
9
- const element = useMemo(()=>{
10
- if (!payoutsSession) return null;
11
- const createdElement = payoutsSession.createElement(WithdrawalBreakdownElement, options);
12
- return createdElement;
13
- }, [
14
- payoutsSession
15
- ]);
16
- const elementSnapshot = useElementSnapshot(element);
17
- const isReady = elementSnapshot?.state === "ready";
18
- useEffect(()=>{
19
- if (!element) return;
20
- element.updateOptions(options);
21
- }, [
22
- options,
23
- element
24
- ]);
25
- useEffect(()=>{
26
- if (!element || !onReady) return;
27
- element.on("ready", onReady);
28
- return ()=>{
29
- element.off("ready", onReady);
30
- };
31
- }, [
32
- element,
33
- onReady
34
- ]);
35
- useLayoutEffect(()=>{
36
- if (!element || !ref.current) return;
37
- element.mount(ref.current);
38
- return ()=>{
39
- element.unmount();
40
- };
41
- }, [
42
- element,
43
- ref.current
44
- ]);
45
- return React.createElement(React.Fragment, null, React.createElement("div", {
46
- style: {
47
- ...style,
48
- visibility: isReady ? void 0 : "hidden"
49
- },
50
- className,
51
- ref
52
- }), !isReady && (fallback ?? null));
53
- }
54
- WithdrawalBreakdownElement.displayName = "WithdrawalBreakdownElement";
55
- WithdrawalBreakdownElement.type = "withdrawal-breakdown-element";
3
+ import { withFallback } from "../../lib/with-fallback.mjs";
4
+ const WithdrawalBreakdownElement = withFallback({
5
+ displayName: "WithdrawalBreakdownElement",
6
+ type: "withdrawal-breakdown-element"
7
+ });
56
8
  export { WithdrawalBreakdownElement };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/payouts/elements/withdrawal-breakdown.tsx"],"sourcesContent":["\"use client\";\n\nimport type { WithdrawalBreakdownElementOptions } 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 WithdrawalBreakdownElement({\n\toptions,\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions: WithdrawalBreakdownElementOptions;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => 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\tWithdrawalBreakdownElement,\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\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\nWithdrawalBreakdownElement.displayName = \"WithdrawalBreakdownElement\";\nWithdrawalBreakdownElement.type = \"withdrawal-breakdown-element\" as const;\n"],"mappings":";;AAIA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAE3B,SAAS,2BAA2B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;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,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,2BAA2B,cAAc;AACzC,2BAA2B,OAAO;","names":[]}
1
+ {"version":3,"sources":["../../../src/payouts/elements/withdrawal-breakdown.tsx"],"sourcesContent":["\"use client\";\n\nimport { withFallback } from \"../../lib/with-fallback\";\n\nexport const WithdrawalBreakdownElement = withFallback<\n\t\"withdrawal-breakdown-element\",\n\ttrue\n>({\n\tdisplayName: \"WithdrawalBreakdownElement\",\n\ttype: \"withdrawal-breakdown-element\",\n});\n"],"mappings":";;AAEA,SAAS,oBAAoB;AAEtB,MAAM,6BAA6B,aAGxC;AAAA,EACD,aAAa;AAAA,EACb,MAAM;AACP,CAAC;","names":[]}
@@ -1,16 +1,11 @@
1
- import { WithdrawalsElementOptions } from '@whop/embedded-components-vanilla-js/types';
2
- import React__default from 'react';
1
+ import { WithFallbackPropsOptional } from '../../lib/with-fallback.js';
2
+ import * as _whop_embedded_components_vanilla_js_types from '@whop/embedded-components-vanilla-js/types';
3
+ import 'react';
3
4
 
4
- declare function WithdrawalsElement({ options, className, style, onReady, fallback, }: {
5
- options?: WithdrawalsElementOptions;
6
- className?: string;
7
- style?: React__default.CSSProperties;
8
- onReady?: () => void;
9
- fallback?: React__default.ReactNode;
10
- }): React__default.JSX.Element;
11
- declare namespace WithdrawalsElement {
12
- var displayName: string;
13
- var type: "withdrawals-element";
14
- }
5
+ declare const WithdrawalsElement: {
6
+ (props: WithFallbackPropsOptional<_whop_embedded_components_vanilla_js_types.WithdrawalsElementOptions>): React.ReactNode;
7
+ displayName: string;
8
+ type: string;
9
+ };
15
10
 
16
11
  export { WithdrawalsElement };
@@ -1,10 +1,8 @@
1
1
  "use strict";
2
2
  "use client";
3
- var __create = Object.create;
4
3
  var __defProp = Object.defineProperty;
5
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
- var __getProtoOf = Object.getPrototypeOf;
8
6
  var __hasOwnProp = Object.prototype.hasOwnProperty;
9
7
  var __export = (target, all) => {
10
8
  for (var name in all)
@@ -18,69 +16,15 @@ var __copyProps = (to, from, except, desc) => {
18
16
  }
19
17
  return to;
20
18
  };
21
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
- // If the importer is in node compatibility mode or this is not an ESM
23
- // file that has been converted to a CommonJS file using a Babel-
24
- // compatible transform (i.e. "__esModule" has not been set), then set
25
- // "default" to the CommonJS "module.exports" for node compatibility.
26
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
- mod
28
- ));
29
19
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
20
  var withdrawals_exports = {};
31
21
  __export(withdrawals_exports, {
32
22
  WithdrawalsElement: () => WithdrawalsElement
33
23
  });
34
24
  module.exports = __toCommonJS(withdrawals_exports);
35
- var import_react = __toESM(require("react"));
36
- var import_use_element_snapshot = require("../../lib/use-element-snapshot");
37
- var import_session = require("../session");
38
- function WithdrawalsElement({
39
- options = {},
40
- className,
41
- style,
42
- onReady,
43
- fallback
44
- }) {
45
- const payoutsSession = (0, import_session.usePayoutsSession)();
46
- const ref = (0, import_react.useRef)(null);
47
- const element = (0, import_react.useMemo)(() => {
48
- if (!payoutsSession) return null;
49
- const createdElement = payoutsSession.createElement(
50
- WithdrawalsElement,
51
- options
52
- );
53
- return createdElement;
54
- }, [payoutsSession]);
55
- const elementSnapshot = (0, import_use_element_snapshot.useElementSnapshot)(element);
56
- const isReady = elementSnapshot?.state === "ready";
57
- (0, import_react.useEffect)(() => {
58
- if (!element) return;
59
- element.updateOptions(options);
60
- }, [options, element]);
61
- (0, import_react.useEffect)(() => {
62
- if (!element || !onReady) return;
63
- element.on("ready", onReady);
64
- return () => {
65
- element.off("ready", onReady);
66
- };
67
- }, [element, onReady]);
68
- (0, import_react.useLayoutEffect)(() => {
69
- if (!element || !ref.current) return;
70
- element.mount(ref.current);
71
- return () => {
72
- element.unmount();
73
- };
74
- }, [element, ref.current]);
75
- return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
76
- "div",
77
- {
78
- style: { ...style, visibility: isReady ? void 0 : "hidden" },
79
- className,
80
- ref
81
- }
82
- ), !isReady && (fallback ?? null));
83
- }
84
- WithdrawalsElement.displayName = "WithdrawalsElement";
85
- WithdrawalsElement.type = "withdrawals-element";
25
+ var import_with_fallback = require("../../lib/with-fallback");
26
+ const WithdrawalsElement = (0, import_with_fallback.withFallback)({
27
+ displayName: "WithdrawalsElement",
28
+ type: "withdrawals-element"
29
+ });
86
30
  //# sourceMappingURL=withdrawals.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/payouts/elements/withdrawals.tsx"],"sourcesContent":["\"use client\";\n\nimport type { WithdrawalsElementOptions } 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 WithdrawalsElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions?: WithdrawalsElementOptions;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => 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\tWithdrawalsElement,\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\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\nWithdrawalsElement.displayName = \"WithdrawalsElement\";\nWithdrawalsElement.type = \"withdrawals-element\" as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAmE;AACnE,kCAAmC;AACnC,qBAAkC;AAE3B,SAAS,mBAAmB;AAAA,EAClC,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,qBAAiB,kCAAkB;AACzC,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,cAAU,sBAAQ,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,sBAAkB,gDAAmB,OAAO;AAElD,QAAM,UAAU,iBAAiB,UAAU;AAE3C,8BAAU,MAAM;AACf,QAAI,CAAC,QAAS;AACd,YAAQ,cAAc,OAAO;AAAA,EAC9B,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,8BAAU,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,oCAAgB,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,6BAAAA,QAAA,2BAAAA,QAAA,gBACC,6BAAAA,QAAA;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,mBAAmB,cAAc;AACjC,mBAAmB,OAAO;","names":["React"]}
1
+ {"version":3,"sources":["../../../src/payouts/elements/withdrawals.tsx"],"sourcesContent":["\"use client\";\n\nimport { withFallback } from \"../../lib/with-fallback\";\n\nexport const WithdrawalsElement = withFallback({\n\tdisplayName: \"WithdrawalsElement\",\n\ttype: \"withdrawals-element\",\n} as const);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAA6B;AAEtB,MAAM,yBAAqB,mCAAa;AAAA,EAC9C,aAAa;AAAA,EACb,MAAM;AACP,CAAU;","names":[]}
@@ -1,56 +1,8 @@
1
1
  "use client";
2
2
  import "../../chunk-NSSMTXJJ.mjs";
3
- import React, { useEffect, useLayoutEffect, useMemo, useRef } from "react";
4
- import { useElementSnapshot } from "../../lib/use-element-snapshot.mjs";
5
- import { usePayoutsSession } from "../session.mjs";
6
- function WithdrawalsElement({ options = {}, className, style, onReady, fallback }) {
7
- const payoutsSession = usePayoutsSession();
8
- const ref = useRef(null);
9
- const element = useMemo(()=>{
10
- if (!payoutsSession) return null;
11
- const createdElement = payoutsSession.createElement(WithdrawalsElement, options);
12
- return createdElement;
13
- }, [
14
- payoutsSession
15
- ]);
16
- const elementSnapshot = useElementSnapshot(element);
17
- const isReady = elementSnapshot?.state === "ready";
18
- useEffect(()=>{
19
- if (!element) return;
20
- element.updateOptions(options);
21
- }, [
22
- options,
23
- element
24
- ]);
25
- useEffect(()=>{
26
- if (!element || !onReady) return;
27
- element.on("ready", onReady);
28
- return ()=>{
29
- element.off("ready", onReady);
30
- };
31
- }, [
32
- element,
33
- onReady
34
- ]);
35
- useLayoutEffect(()=>{
36
- if (!element || !ref.current) return;
37
- element.mount(ref.current);
38
- return ()=>{
39
- element.unmount();
40
- };
41
- }, [
42
- element,
43
- ref.current
44
- ]);
45
- return React.createElement(React.Fragment, null, React.createElement("div", {
46
- style: {
47
- ...style,
48
- visibility: isReady ? void 0 : "hidden"
49
- },
50
- className,
51
- ref
52
- }), !isReady && (fallback ?? null));
53
- }
54
- WithdrawalsElement.displayName = "WithdrawalsElement";
55
- WithdrawalsElement.type = "withdrawals-element";
3
+ import { withFallback } from "../../lib/with-fallback.mjs";
4
+ const WithdrawalsElement = withFallback({
5
+ displayName: "WithdrawalsElement",
6
+ type: "withdrawals-element"
7
+ });
56
8
  export { WithdrawalsElement };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/payouts/elements/withdrawals.tsx"],"sourcesContent":["\"use client\";\n\nimport type { WithdrawalsElementOptions } 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 WithdrawalsElement({\n\toptions = {},\n\tclassName,\n\tstyle,\n\tonReady,\n\tfallback,\n}: {\n\toptions?: WithdrawalsElementOptions;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => 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\tWithdrawalsElement,\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\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\nWithdrawalsElement.displayName = \"WithdrawalsElement\";\nWithdrawalsElement.type = \"withdrawals-element\" as const;\n"],"mappings":";;AAIA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAE3B,SAAS,mBAAmB;AAAA,EAClC,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;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,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,mBAAmB,cAAc;AACjC,mBAAmB,OAAO;","names":[]}
1
+ {"version":3,"sources":["../../../src/payouts/elements/withdrawals.tsx"],"sourcesContent":["\"use client\";\n\nimport { withFallback } from \"../../lib/with-fallback\";\n\nexport const WithdrawalsElement = withFallback({\n\tdisplayName: \"WithdrawalsElement\",\n\ttype: \"withdrawals-element\",\n} as const);\n"],"mappings":";;AAEA,SAAS,oBAAoB;AAEtB,MAAM,qBAAqB,aAAa;AAAA,EAC9C,aAAa;AAAA,EACb,MAAM;AACP,CAAU;","names":[]}
@@ -10,5 +10,8 @@ export { TotalBalanceBreakdownElement } from './elements/total-balance-breakdown
10
10
  export { PendingBalanceBreakdownElement } from './elements/pending-balance-breakdown.js';
11
11
  export { RegularReserveBalanceBreakdownElement } from './elements/regular-reserve-balance-breakdown.js';
12
12
  export { BnplReserveBalanceBreakdownElement } from './elements/bnpl-reserve-balance-breakdown.js';
13
+ export { GenerateWithdrawalReceiptElement } from './elements/generate-withdrawal-receipt.js';
14
+ export { StatusBannerElement } from './elements/status-banner.js';
13
15
  import '@whop/embedded-components-vanilla-js/types';
14
16
  import 'react';
17
+ import '../lib/with-fallback.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@whop/embedded-components-react-js",
3
- "version": "0.0.5-beta.1",
3
+ "version": "0.0.5-beta.12",
4
4
  "description": "React components for Whop.js",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -21,7 +21,7 @@
21
21
  "access": "public"
22
22
  },
23
23
  "peerDependencies": {
24
- "@whop/embedded-components-vanilla-js": "^0.0.5-beta.1",
24
+ "@whop/embedded-components-vanilla-js": "^0.0.5-beta.12",
25
25
  "react": ">=16.8.0 <20.0.0",
26
26
  "react-dom": ">=16.8.0 <20.0.0"
27
27
  }
package/package.json.temp DELETED
@@ -1,44 +0,0 @@
1
- {
2
- "name": "@whop/embedded-components-react-js",
3
- "private": true,
4
- "version": "0.0.5-beta.1",
5
- "description": "React components for Whop.js",
6
- "main": "dist/index.js",
7
- "module": "dist/index.mjs",
8
- "jsnext:main": "dist/index.mjs",
9
- "types": "dist/index.d.ts",
10
- "typing": "dist/index.d.ts",
11
- "scripts": {
12
- "build": "rimraf dist && NODE_ENV=production tsup",
13
- "dev": "NODE_ENV=development tsup --watch",
14
- "prepublishOnly": "node ./scripts/pre-publish.mjs",
15
- "postpublish": "node ./scripts/post-publish.mjs"
16
- },
17
- "keywords": ["Whop", "Whop.js", "React", "embedded", "payments", "payouts"],
18
- "author": "Whop (https://whop.com)",
19
- "license": "MIT",
20
- "publishConfig": {
21
- "access": "public"
22
- },
23
- "devDependencies": {
24
- "@local/eslint-config": "workspace:*",
25
- "@local/typescript-config": "workspace:*",
26
- "@swc/core": "1.11.29",
27
- "@types/node": "latest",
28
- "@types/react": "^18.0.0",
29
- "@types/react-dom": "^18.0.0",
30
- "@whop/embedded-components-vanilla-js": "workspace:^",
31
- "eslint": "latest",
32
- "fast-glob": "^3.3.3",
33
- "react": "18.1.0",
34
- "react-dom": "18.1.0",
35
- "rimraf": "^6.1.0",
36
- "tsup": "latest",
37
- "typescript": "latest"
38
- },
39
- "peerDependencies": {
40
- "@whop/embedded-components-vanilla-js": "workspace:^",
41
- "react": ">=16.8.0 <20.0.0",
42
- "react-dom": ">=16.8.0 <20.0.0"
43
- }
44
- }