@parafin/react 1.0.6 → 1.0.8

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 (4) hide show
  1. package/index.tsx +67 -71
  2. package/out/index.d.ts +1 -1
  3. package/out/index.js +59 -64
  4. package/package.json +2 -2
package/index.tsx CHANGED
@@ -29,88 +29,84 @@ type OptInFields = {
29
29
  const ParafinWidget = (
30
30
  props: {
31
31
  token: string
32
- product: 'capital' | 'banking'
32
+ product: 'capital' | 'wallet'
33
33
  externalBusinessId?: string
34
34
  onExit?: () => void
35
35
  onOptIn?: () => Promise<OptInFields>
36
36
  } & Record<string, any>
37
37
  ) => {
38
- try {
39
- const frameRef = useRef<HTMLIFrameElement>(null)
40
- const [frameKey, setFrameKey] = useState(0)
41
- const [frameHeight, setFrameHeight] = useState('258px')
42
- const [borderColor, setBorderColor] = useState('#E8E8E8')
43
- const [borderRadius, setBorderRadius] = useState('16px')
38
+ const frameRef = useRef<HTMLIFrameElement>(null)
39
+ const [frameKey, setFrameKey] = useState(0)
40
+ const [frameHeight, setFrameHeight] = useState('258px')
41
+ const [borderColor, setBorderColor] = useState('#E8E8E8')
42
+ const [borderRadius, setBorderRadius] = useState('16px')
44
43
 
45
- const url = new URL(props.widgetUrlOverride ?? 'https://widget.parafin.com')
46
- const query = {
47
- token: props.token,
48
- product: props.product,
49
- hasOptIn: props.onOptIn ? 'true' : 'false',
50
- host: window.location.origin,
51
- externalBusinessId: props.externalBusinessId ?? '',
52
- ...Object.fromEntries(url.searchParams),
53
- }
44
+ const url = new URL(props.widgetUrlOverride ?? 'https://widget.parafin.com')
45
+ const query = {
46
+ token: props.token,
47
+ product: props.product,
48
+ hasOptIn: props.onOptIn ? 'true' : 'false',
49
+ host: window.location.origin,
50
+ externalBusinessId: props.externalBusinessId ?? '',
51
+ ...Object.fromEntries(url.searchParams),
52
+ }
54
53
 
55
- const messageListener = async ({ data, origin }: MessageEvent) => {
56
- if (origin === url.origin) {
57
- switch (data?.message) {
58
- case 'set-border':
59
- if (data?.borderColor) setBorderColor(data.borderColor)
60
- if (data?.borderRadius) setBorderRadius(data.borderRadius)
61
- break
62
- case 'open-dashboard':
63
- openParafinDashboard({
64
- ...props,
65
- route: data?.route,
66
- onExit: () => {
67
- setFrameKey((key) => key + 1)
68
- props.onExit?.()
69
- },
70
- dashboardUrlOverride: props.dashboardUrlOverride,
71
- })
72
- break
73
- case 'opt-in':
74
- if (props.onOptIn) {
75
- const optInFields = await props.onOptIn()
76
- frameRef?.current?.contentWindow?.postMessage(
77
- { message: 'opt-in', optInFields: optInFields },
78
- url.origin
79
- )
80
- }
81
- break
82
- case 'set-height':
83
- if (data?.height) setFrameHeight(data.height)
84
- break
85
- }
54
+ const messageListener = async ({ data, origin }: MessageEvent) => {
55
+ if (origin === url.origin && data?.product === props.product) {
56
+ switch (data?.message) {
57
+ case 'set-border':
58
+ if (data?.borderColor) setBorderColor(data.borderColor)
59
+ if (data?.borderRadius) setBorderRadius(data.borderRadius)
60
+ break
61
+ case 'open-dashboard':
62
+ openParafinDashboard({
63
+ ...props,
64
+ route: data?.route,
65
+ onExit: () => {
66
+ setFrameKey((key) => key + 1)
67
+ props.onExit?.()
68
+ },
69
+ dashboardUrlOverride: props.dashboardUrlOverride,
70
+ })
71
+ break
72
+ case 'opt-in':
73
+ if (props.onOptIn) {
74
+ const optInFields = await props.onOptIn()
75
+ frameRef?.current?.contentWindow?.postMessage(
76
+ { message: 'opt-in', optInFields: optInFields },
77
+ url.origin
78
+ )
79
+ }
80
+ break
81
+ case 'set-height':
82
+ if (data?.height) setFrameHeight(data.height)
83
+ break
86
84
  }
87
85
  }
86
+ }
88
87
 
89
- useEffect(() => {
90
- window.addEventListener('message', messageListener)
91
- return () => window.removeEventListener('message', messageListener)
92
- }, [])
88
+ useEffect(() => {
89
+ window.addEventListener('message', messageListener)
90
+ return () => window.removeEventListener('message', messageListener)
91
+ }, [])
93
92
 
94
- return (
95
- <iframe
96
- key={frameKey}
97
- ref={frameRef}
98
- id={`parafin-${props.product}-widget`}
99
- src={`${url.origin}?${new URLSearchParams(query).toString()}`}
100
- style={{
101
- width: '100%',
102
- height: frameHeight,
103
- backgroundColor: '#fff',
104
- border: `1px solid ${borderColor}`,
105
- borderRadius: borderRadius,
106
- transition: 'border 0.2s, border-radius 0.2s',
107
- boxSizing: 'border-box',
108
- }}
109
- />
110
- )
111
- } catch {
112
- console.error('Error loading Parafin widget')
113
- }
93
+ return (
94
+ <iframe
95
+ key={frameKey}
96
+ ref={frameRef}
97
+ id={`parafin-${props.product}-widget`}
98
+ src={`${url.origin}?${new URLSearchParams(query).toString()}`}
99
+ style={{
100
+ width: '100%',
101
+ height: frameHeight,
102
+ backgroundColor: '#fff',
103
+ border: `1px solid ${borderColor}`,
104
+ borderRadius: borderRadius,
105
+ transition: 'border 0.2s, border-radius 0.2s',
106
+ boxSizing: 'border-box',
107
+ }}
108
+ />
109
+ )
114
110
  }
115
111
 
116
112
  export { OptInFields, ParafinWidget }
package/out/index.d.ts CHANGED
@@ -24,7 +24,7 @@ type OptInFields = {
24
24
  };
25
25
  declare const ParafinWidget: (props: {
26
26
  token: string;
27
- product: 'capital' | 'banking';
27
+ product: 'capital' | 'wallet';
28
28
  externalBusinessId?: string;
29
29
  onExit?: () => void;
30
30
  onOptIn?: () => Promise<OptInFields>;
package/out/index.js CHANGED
@@ -2,70 +2,65 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useEffect, useRef, useState } from 'react';
3
3
  import { openParafinDashboard } from '@parafin/core';
4
4
  const ParafinWidget = (props) => {
5
- try {
6
- const frameRef = useRef(null);
7
- const [frameKey, setFrameKey] = useState(0);
8
- const [frameHeight, setFrameHeight] = useState('258px');
9
- const [borderColor, setBorderColor] = useState('#E8E8E8');
10
- const [borderRadius, setBorderRadius] = useState('16px');
11
- const url = new URL(props.widgetUrlOverride ?? 'https://widget.parafin.com');
12
- const query = {
13
- token: props.token,
14
- product: props.product,
15
- hasOptIn: props.onOptIn ? 'true' : 'false',
16
- host: window.location.origin,
17
- externalBusinessId: props.externalBusinessId ?? '',
18
- ...Object.fromEntries(url.searchParams),
19
- };
20
- const messageListener = async ({ data, origin }) => {
21
- if (origin === url.origin) {
22
- switch (data?.message) {
23
- case 'set-border':
24
- if (data?.borderColor)
25
- setBorderColor(data.borderColor);
26
- if (data?.borderRadius)
27
- setBorderRadius(data.borderRadius);
28
- break;
29
- case 'open-dashboard':
30
- openParafinDashboard({
31
- ...props,
32
- route: data?.route,
33
- onExit: () => {
34
- setFrameKey((key) => key + 1);
35
- props.onExit?.();
36
- },
37
- dashboardUrlOverride: props.dashboardUrlOverride,
38
- });
39
- break;
40
- case 'opt-in':
41
- if (props.onOptIn) {
42
- const optInFields = await props.onOptIn();
43
- frameRef?.current?.contentWindow?.postMessage({ message: 'opt-in', optInFields: optInFields }, url.origin);
44
- }
45
- break;
46
- case 'set-height':
47
- if (data?.height)
48
- setFrameHeight(data.height);
49
- break;
50
- }
5
+ const frameRef = useRef(null);
6
+ const [frameKey, setFrameKey] = useState(0);
7
+ const [frameHeight, setFrameHeight] = useState('258px');
8
+ const [borderColor, setBorderColor] = useState('#E8E8E8');
9
+ const [borderRadius, setBorderRadius] = useState('16px');
10
+ const url = new URL(props.widgetUrlOverride ?? 'https://widget.parafin.com');
11
+ const query = {
12
+ token: props.token,
13
+ product: props.product,
14
+ hasOptIn: props.onOptIn ? 'true' : 'false',
15
+ host: window.location.origin,
16
+ externalBusinessId: props.externalBusinessId ?? '',
17
+ ...Object.fromEntries(url.searchParams),
18
+ };
19
+ const messageListener = async ({ data, origin }) => {
20
+ if (origin === url.origin && data?.product === props.product) {
21
+ switch (data?.message) {
22
+ case 'set-border':
23
+ if (data?.borderColor)
24
+ setBorderColor(data.borderColor);
25
+ if (data?.borderRadius)
26
+ setBorderRadius(data.borderRadius);
27
+ break;
28
+ case 'open-dashboard':
29
+ openParafinDashboard({
30
+ ...props,
31
+ route: data?.route,
32
+ onExit: () => {
33
+ setFrameKey((key) => key + 1);
34
+ props.onExit?.();
35
+ },
36
+ dashboardUrlOverride: props.dashboardUrlOverride,
37
+ });
38
+ break;
39
+ case 'opt-in':
40
+ if (props.onOptIn) {
41
+ const optInFields = await props.onOptIn();
42
+ frameRef?.current?.contentWindow?.postMessage({ message: 'opt-in', optInFields: optInFields }, url.origin);
43
+ }
44
+ break;
45
+ case 'set-height':
46
+ if (data?.height)
47
+ setFrameHeight(data.height);
48
+ break;
51
49
  }
52
- };
53
- useEffect(() => {
54
- window.addEventListener('message', messageListener);
55
- return () => window.removeEventListener('message', messageListener);
56
- }, []);
57
- return (_jsx("iframe", { ref: frameRef, id: `parafin-${props.product}-widget`, src: `${url.origin}?${new URLSearchParams(query).toString()}`, style: {
58
- width: '100%',
59
- height: frameHeight,
60
- backgroundColor: '#fff',
61
- border: `1px solid ${borderColor}`,
62
- borderRadius: borderRadius,
63
- transition: 'border 0.2s, border-radius 0.2s',
64
- boxSizing: 'border-box',
65
- } }, frameKey));
66
- }
67
- catch {
68
- console.error('Error loading Parafin widget');
69
- }
50
+ }
51
+ };
52
+ useEffect(() => {
53
+ window.addEventListener('message', messageListener);
54
+ return () => window.removeEventListener('message', messageListener);
55
+ }, []);
56
+ return (_jsx("iframe", { ref: frameRef, id: `parafin-${props.product}-widget`, src: `${url.origin}?${new URLSearchParams(query).toString()}`, style: {
57
+ width: '100%',
58
+ height: frameHeight,
59
+ backgroundColor: '#fff',
60
+ border: `1px solid ${borderColor}`,
61
+ borderRadius: borderRadius,
62
+ transition: 'border 0.2s, border-radius 0.2s',
63
+ boxSizing: 'border-box',
64
+ } }, frameKey));
70
65
  };
71
66
  export { ParafinWidget };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@parafin/react",
3
- "version": "1.0.6",
3
+ "version": "1.0.8",
4
4
  "description": "Parafin React widget",
5
5
  "author": "Parafin (https://www.parafin.com)",
6
6
  "module": "out/index.js",
@@ -14,7 +14,7 @@
14
14
  "typescript": "^4.9.5"
15
15
  },
16
16
  "dependencies": {
17
- "@parafin/core": "^1.0.9",
17
+ "@parafin/core": "^1.0.10",
18
18
  "react": "^16.8.0"
19
19
  }
20
20
  }