@parafin/react 1.0.4 → 1.0.6

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