@parafin/react 1.0.5 → 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 (3) hide show
  1. package/index.tsx +20 -30
  2. package/out/index.js +18 -27
  3. package/package.json +2 -2
package/index.tsx CHANGED
@@ -36,34 +36,24 @@ const ParafinWidget = (
36
36
  } & Record<string, any>
37
37
  ) => {
38
38
  try {
39
- const iframeRef = useRef<HTMLIFrameElement>(null)
40
- const [iframeKey, setIframeKey] = useState(0)
41
- const [iframeHeight, setIframeHeight] = useState('258px')
39
+ const frameRef = useRef<HTMLIFrameElement>(null)
40
+ const [frameKey, setFrameKey] = useState(0)
41
+ const [frameHeight, setFrameHeight] = useState('258px')
42
42
  const [borderColor, setBorderColor] = useState('#E8E8E8')
43
43
  const [borderRadius, setBorderRadius] = useState('16px')
44
44
 
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
- }
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),
54
53
  }
55
54
 
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
- : ''
64
-
65
55
  const messageListener = async ({ data, origin }: MessageEvent) => {
66
- if (origin === baseUrl) {
56
+ if (origin === url.origin) {
67
57
  switch (data?.message) {
68
58
  case 'set-border':
69
59
  if (data?.borderColor) setBorderColor(data.borderColor)
@@ -74,7 +64,7 @@ const ParafinWidget = (
74
64
  ...props,
75
65
  route: data?.route,
76
66
  onExit: () => {
77
- setIframeKey((key) => key + 1)
67
+ setFrameKey((key) => key + 1)
78
68
  props.onExit?.()
79
69
  },
80
70
  dashboardUrlOverride: props.dashboardUrlOverride,
@@ -83,14 +73,14 @@ const ParafinWidget = (
83
73
  case 'opt-in':
84
74
  if (props.onOptIn) {
85
75
  const optInFields = await props.onOptIn()
86
- iframeRef?.current?.contentWindow?.postMessage(
76
+ frameRef?.current?.contentWindow?.postMessage(
87
77
  { message: 'opt-in', optInFields: optInFields },
88
- baseUrl
78
+ url.origin
89
79
  )
90
80
  }
91
81
  break
92
82
  case 'set-height':
93
- if (data?.height) setIframeHeight(data.height)
83
+ if (data?.height) setFrameHeight(data.height)
94
84
  break
95
85
  }
96
86
  }
@@ -103,13 +93,13 @@ const ParafinWidget = (
103
93
 
104
94
  return (
105
95
  <iframe
106
- key={iframeKey}
107
- ref={iframeRef}
96
+ key={frameKey}
97
+ ref={frameRef}
108
98
  id={`parafin-${props.product}-widget`}
109
- src={`${baseUrl}${token}${product}${hasOptIn}${host}${externalBusinessId}`}
99
+ src={`${url.origin}?${new URLSearchParams(query).toString()}`}
110
100
  style={{
111
101
  width: '100%',
112
- height: iframeHeight,
102
+ height: frameHeight,
113
103
  backgroundColor: '#fff',
114
104
  border: `1px solid ${borderColor}`,
115
105
  borderRadius: borderRadius,
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 props.widgetUrlOverride ?? '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,7 +31,7 @@ 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
  },
46
37
  dashboardUrlOverride: props.dashboardUrlOverride,
@@ -49,12 +40,12 @@ const ParafinWidget = (props) => {
49
40
  case 'opt-in':
50
41
  if (props.onOptIn) {
51
42
  const optInFields = await props.onOptIn();
52
- iframeRef?.current?.contentWindow?.postMessage({ message: 'opt-in', optInFields: optInFields }, baseUrl);
43
+ frameRef?.current?.contentWindow?.postMessage({ message: 'opt-in', optInFields: optInFields }, url.origin);
53
44
  }
54
45
  break;
55
46
  case 'set-height':
56
47
  if (data?.height)
57
- setIframeHeight(data.height);
48
+ setFrameHeight(data.height);
58
49
  break;
59
50
  }
60
51
  }
@@ -63,15 +54,15 @@ const ParafinWidget = (props) => {
63
54
  window.addEventListener('message', messageListener);
64
55
  return () => window.removeEventListener('message', messageListener);
65
56
  }, []);
66
- 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: {
67
58
  width: '100%',
68
- height: iframeHeight,
59
+ height: frameHeight,
69
60
  backgroundColor: '#fff',
70
61
  border: `1px solid ${borderColor}`,
71
62
  borderRadius: borderRadius,
72
63
  transition: 'border 0.2s, border-radius 0.2s',
73
64
  boxSizing: 'border-box',
74
- } }, iframeKey));
65
+ } }, frameKey));
75
66
  }
76
67
  catch {
77
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.5",
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.8",
17
+ "@parafin/core": "^1.0.9",
18
18
  "react": "^16.8.0"
19
19
  }
20
20
  }