@parafin/react 1.0.5 → 1.0.7

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 (3) hide show
  1. package/index.tsx +66 -80
  2. package/out/index.js +59 -73
  3. package/package.json +2 -2
package/index.tsx CHANGED
@@ -35,92 +35,78 @@ const ParafinWidget = (
35
35
  onOptIn?: () => Promise<OptInFields>
36
36
  } & Record<string, any>
37
37
  ) => {
38
- try {
39
- const iframeRef = useRef<HTMLIFrameElement>(null)
40
- const [iframeKey, setIframeKey] = useState(0)
41
- const [iframeHeight, setIframeHeight] = 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 getBaseUrl = () => {
46
- switch (props.environment) {
47
- case 'local':
48
- return 'http://localhost:9090'
49
- case 'development':
50
- return props.widgetUrlOverride ?? 'https://widget.dev.parafin.com'
51
- default:
52
- return 'https://widget.parafin.com'
53
- }
54
- }
55
-
56
- const baseUrl = getBaseUrl()
57
- const token = `?token=${props.token}`
58
- const product = `&product=${props.product}`
59
- const hasOptIn = `&hasOptIn=${props.onOptIn ? 'true' : 'false'}`
60
- const host = `&host=${window.location.origin}`
61
- const externalBusinessId = props.externalBusinessId
62
- ? `&externalBusinessId=${props.externalBusinessId}`
63
- : ''
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
+ }
64
53
 
65
- const messageListener = async ({ data, origin }: MessageEvent) => {
66
- if (origin === baseUrl) {
67
- switch (data?.message) {
68
- case 'set-border':
69
- if (data?.borderColor) setBorderColor(data.borderColor)
70
- if (data?.borderRadius) setBorderRadius(data.borderRadius)
71
- break
72
- case 'open-dashboard':
73
- openParafinDashboard({
74
- ...props,
75
- route: data?.route,
76
- onExit: () => {
77
- setIframeKey((key) => key + 1)
78
- props.onExit?.()
79
- },
80
- dashboardUrlOverride: props.dashboardUrlOverride,
81
- })
82
- break
83
- case 'opt-in':
84
- if (props.onOptIn) {
85
- const optInFields = await props.onOptIn()
86
- iframeRef?.current?.contentWindow?.postMessage(
87
- { message: 'opt-in', optInFields: optInFields },
88
- baseUrl
89
- )
90
- }
91
- break
92
- case 'set-height':
93
- if (data?.height) setIframeHeight(data.height)
94
- break
95
- }
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
96
84
  }
97
85
  }
86
+ }
98
87
 
99
- useEffect(() => {
100
- window.addEventListener('message', messageListener)
101
- return () => window.removeEventListener('message', messageListener)
102
- }, [])
88
+ useEffect(() => {
89
+ window.addEventListener('message', messageListener)
90
+ return () => window.removeEventListener('message', messageListener)
91
+ }, [])
103
92
 
104
- return (
105
- <iframe
106
- key={iframeKey}
107
- ref={iframeRef}
108
- id={`parafin-${props.product}-widget`}
109
- src={`${baseUrl}${token}${product}${hasOptIn}${host}${externalBusinessId}`}
110
- style={{
111
- width: '100%',
112
- height: iframeHeight,
113
- backgroundColor: '#fff',
114
- border: `1px solid ${borderColor}`,
115
- borderRadius: borderRadius,
116
- transition: 'border 0.2s, border-radius 0.2s',
117
- boxSizing: 'border-box',
118
- }}
119
- />
120
- )
121
- } catch {
122
- console.error('Error loading Parafin widget')
123
- }
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
+ )
124
110
  }
125
111
 
126
112
  export { OptInFields, ParafinWidget }
package/out/index.js CHANGED
@@ -2,79 +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 iframeRef = useRef(null);
7
- const [iframeKey, setIframeKey] = useState(0);
8
- const [iframeHeight, setIframeHeight] = useState('258px');
9
- const [borderColor, setBorderColor] = useState('#E8E8E8');
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 props.widgetUrlOverride ?? 'https://widget.dev.parafin.com';
17
- default:
18
- return 'https://widget.parafin.com';
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;
19
49
  }
20
- };
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
- const messageListener = async ({ data, origin }) => {
30
- if (origin === baseUrl) {
31
- switch (data?.message) {
32
- case 'set-border':
33
- if (data?.borderColor)
34
- setBorderColor(data.borderColor);
35
- if (data?.borderRadius)
36
- setBorderRadius(data.borderRadius);
37
- break;
38
- case 'open-dashboard':
39
- openParafinDashboard({
40
- ...props,
41
- route: data?.route,
42
- onExit: () => {
43
- setIframeKey((key) => key + 1);
44
- props.onExit?.();
45
- },
46
- dashboardUrlOverride: props.dashboardUrlOverride,
47
- });
48
- break;
49
- case 'opt-in':
50
- if (props.onOptIn) {
51
- const optInFields = await props.onOptIn();
52
- iframeRef?.current?.contentWindow?.postMessage({ message: 'opt-in', optInFields: optInFields }, baseUrl);
53
- }
54
- break;
55
- case 'set-height':
56
- if (data?.height)
57
- setIframeHeight(data.height);
58
- break;
59
- }
60
- }
61
- };
62
- useEffect(() => {
63
- window.addEventListener('message', messageListener);
64
- return () => window.removeEventListener('message', messageListener);
65
- }, []);
66
- return (_jsx("iframe", { ref: iframeRef, id: `parafin-${props.product}-widget`, src: `${baseUrl}${token}${product}${hasOptIn}${host}${externalBusinessId}`, style: {
67
- width: '100%',
68
- height: iframeHeight,
69
- backgroundColor: '#fff',
70
- border: `1px solid ${borderColor}`,
71
- borderRadius: borderRadius,
72
- transition: 'border 0.2s, border-radius 0.2s',
73
- boxSizing: 'border-box',
74
- } }, iframeKey));
75
- }
76
- catch {
77
- console.error('Error loading Parafin widget');
78
- }
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));
79
65
  };
80
66
  export { ParafinWidget };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@parafin/react",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
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.8",
17
+ "@parafin/core": "^1.0.9",
18
18
  "react": "^16.8.0"
19
19
  }
20
20
  }