gotcha-feedback 1.0.7 → 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.
- package/README.md +88 -0
- package/dist/index.d.mts +20 -1
- package/dist/index.d.ts +20 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -40,6 +40,8 @@ function FeatureCard() {
|
|
|
40
40
|
|
|
41
41
|
- **Feedback Mode** - Star rating + text input
|
|
42
42
|
- **Vote Mode** - Thumbs up/down
|
|
43
|
+
- **User Segmentation** - Analyze feedback by custom user attributes
|
|
44
|
+
- **Edit Support** - Users can update their previous submissions
|
|
43
45
|
- **Customizable** - Themes, sizes, positions
|
|
44
46
|
- **Accessible** - Full keyboard navigation and screen reader support
|
|
45
47
|
- **Animated** - Smooth enter/exit animations with CSS transitions
|
|
@@ -68,6 +70,7 @@ function FeatureCard() {
|
|
|
68
70
|
| `theme` | `'light' \| 'dark' \| 'auto'` | `'light'` | Color theme |
|
|
69
71
|
| `showOnHover` | `boolean` | `true` | Only show on hover |
|
|
70
72
|
| `promptText` | `string` | Mode-specific | Custom prompt text |
|
|
73
|
+
| `user` | `object` | - | User metadata for segmentation |
|
|
71
74
|
| `onSubmit` | `function` | - | Callback after submission |
|
|
72
75
|
| `onOpen` | `function` | - | Callback when modal opens |
|
|
73
76
|
| `onClose` | `function` | - | Callback when modal closes |
|
|
@@ -104,7 +107,10 @@ function FeatureCard() {
|
|
|
104
107
|
|
|
105
108
|
### With User Data
|
|
106
109
|
|
|
110
|
+
Pass user metadata for segmentation and analytics. When a `user.id` is provided, users can also edit their previous submissions.
|
|
111
|
+
|
|
107
112
|
```tsx
|
|
113
|
+
// Set default user data at the provider level
|
|
108
114
|
<GotchaProvider
|
|
109
115
|
apiKey="your-api-key"
|
|
110
116
|
defaultUser={{ plan: 'pro', role: 'admin' }}
|
|
@@ -113,6 +119,36 @@ function FeatureCard() {
|
|
|
113
119
|
</GotchaProvider>
|
|
114
120
|
```
|
|
115
121
|
|
|
122
|
+
```tsx
|
|
123
|
+
// Pass dynamic user data from your app
|
|
124
|
+
<Gotcha
|
|
125
|
+
elementId="feature-card"
|
|
126
|
+
user={{
|
|
127
|
+
id: currentUser.id, // Required for edit functionality
|
|
128
|
+
email: currentUser.email,
|
|
129
|
+
plan: currentUser.subscription,
|
|
130
|
+
age: currentUser.age,
|
|
131
|
+
country: currentUser.country,
|
|
132
|
+
company: currentUser.company
|
|
133
|
+
}}
|
|
134
|
+
/>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
```tsx
|
|
138
|
+
// Or capture device/browser info
|
|
139
|
+
<Gotcha
|
|
140
|
+
elementId="checkout"
|
|
141
|
+
user={{
|
|
142
|
+
id: user.id,
|
|
143
|
+
deviceType: isMobile ? 'mobile' : 'desktop',
|
|
144
|
+
browser: navigator.userAgent.includes('Chrome') ? 'Chrome' : 'Other',
|
|
145
|
+
locale: navigator.language
|
|
146
|
+
}}
|
|
147
|
+
/>
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
Pass any attributes relevant to your use case. Supported value types: `string`, `number`, `boolean`, or `null`.
|
|
151
|
+
|
|
116
152
|
### Custom Callbacks
|
|
117
153
|
|
|
118
154
|
```tsx
|
|
@@ -153,6 +189,58 @@ function MyComponent() {
|
|
|
153
189
|
}
|
|
154
190
|
```
|
|
155
191
|
|
|
192
|
+
## User Metadata & Segmentation
|
|
193
|
+
|
|
194
|
+
When you pass custom attributes in the `user` prop, Gotcha automatically tracks them and enables segmentation in your dashboard.
|
|
195
|
+
|
|
196
|
+
### How It Works
|
|
197
|
+
|
|
198
|
+
1. **Pass user attributes** when rendering the Gotcha component
|
|
199
|
+
2. **View segmented analytics** in your dashboard under Analytics > Segments
|
|
200
|
+
3. **Filter and compare** feedback by user attributes (plan, age, location, etc.)
|
|
201
|
+
|
|
202
|
+
### Example Use Cases
|
|
203
|
+
|
|
204
|
+
```tsx
|
|
205
|
+
// Segment by subscription plan
|
|
206
|
+
<Gotcha elementId="pricing" user={{ id: user.id, plan: user.plan }} />
|
|
207
|
+
// → Compare how free vs. pro users feel about pricing
|
|
208
|
+
|
|
209
|
+
// Segment by device type
|
|
210
|
+
<Gotcha elementId="checkout" user={{ id: user.id, device: isMobile ? 'mobile' : 'desktop' }} />
|
|
211
|
+
// → See if mobile users have different pain points
|
|
212
|
+
|
|
213
|
+
// Segment by country
|
|
214
|
+
<Gotcha elementId="shipping" user={{ id: user.id, country: user.country }} />
|
|
215
|
+
// → Understand regional differences in feedback
|
|
216
|
+
|
|
217
|
+
// Segment by user tenure
|
|
218
|
+
<Gotcha elementId="dashboard" user={{ id: user.id, accountAge: user.daysActive > 30 ? 'established' : 'new' }} />
|
|
219
|
+
// → Compare new user vs. power user sentiment
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
In your dashboard under Analytics > Segments, you can group responses by any of these attributes.
|
|
223
|
+
|
|
224
|
+
## Edit Previous Submissions
|
|
225
|
+
|
|
226
|
+
When you provide a `user.id`, users can update their previous feedback instead of creating duplicates.
|
|
227
|
+
|
|
228
|
+
### How It Works
|
|
229
|
+
|
|
230
|
+
1. User submits feedback for an element
|
|
231
|
+
2. User returns later and opens the same feedback modal
|
|
232
|
+
3. Their previous response is automatically loaded
|
|
233
|
+
4. They can modify and re-submit to update their feedback
|
|
234
|
+
|
|
235
|
+
```tsx
|
|
236
|
+
<Gotcha
|
|
237
|
+
elementId="feature-card"
|
|
238
|
+
user={{ id: 'user_123' }} // Required for edit functionality
|
|
239
|
+
/>
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
The modal will show "Update" instead of "Submit" when editing, and previous values will be pre-filled.
|
|
243
|
+
|
|
156
244
|
## TypeScript
|
|
157
245
|
|
|
158
246
|
The package includes full TypeScript definitions:
|
package/dist/index.d.mts
CHANGED
|
@@ -36,10 +36,21 @@ interface SubmitResponsePayload {
|
|
|
36
36
|
}
|
|
37
37
|
interface GotchaResponse {
|
|
38
38
|
id: string;
|
|
39
|
-
status: 'created' | 'duplicate';
|
|
39
|
+
status: 'created' | 'duplicate' | 'updated';
|
|
40
40
|
createdAt: string;
|
|
41
41
|
results?: PollResults;
|
|
42
42
|
}
|
|
43
|
+
interface ExistingResponse {
|
|
44
|
+
id: string;
|
|
45
|
+
mode: ResponseMode;
|
|
46
|
+
content?: string | null;
|
|
47
|
+
title?: string | null;
|
|
48
|
+
rating?: number | null;
|
|
49
|
+
vote?: VoteType | null;
|
|
50
|
+
pollOptions?: string[] | null;
|
|
51
|
+
pollSelected?: string[] | null;
|
|
52
|
+
createdAt: string;
|
|
53
|
+
}
|
|
43
54
|
interface PollResults {
|
|
44
55
|
[option: string]: number;
|
|
45
56
|
}
|
|
@@ -124,6 +135,14 @@ declare function useGotcha(): {
|
|
|
124
135
|
/** The API client for manual submissions */
|
|
125
136
|
client: {
|
|
126
137
|
submitResponse(payload: Omit<SubmitResponsePayload, "context">): Promise<GotchaResponse>;
|
|
138
|
+
checkExistingResponse(elementId: string, userId: string): Promise<ExistingResponse | null>;
|
|
139
|
+
updateResponse(id: string, payload: {
|
|
140
|
+
content?: string;
|
|
141
|
+
title?: string;
|
|
142
|
+
rating?: number;
|
|
143
|
+
vote?: VoteType;
|
|
144
|
+
pollSelected?: string[];
|
|
145
|
+
}, userId?: string): Promise<GotchaResponse>;
|
|
127
146
|
getBaseUrl(): string;
|
|
128
147
|
};
|
|
129
148
|
/** Whether Gotcha is globally disabled */
|
package/dist/index.d.ts
CHANGED
|
@@ -36,10 +36,21 @@ interface SubmitResponsePayload {
|
|
|
36
36
|
}
|
|
37
37
|
interface GotchaResponse {
|
|
38
38
|
id: string;
|
|
39
|
-
status: 'created' | 'duplicate';
|
|
39
|
+
status: 'created' | 'duplicate' | 'updated';
|
|
40
40
|
createdAt: string;
|
|
41
41
|
results?: PollResults;
|
|
42
42
|
}
|
|
43
|
+
interface ExistingResponse {
|
|
44
|
+
id: string;
|
|
45
|
+
mode: ResponseMode;
|
|
46
|
+
content?: string | null;
|
|
47
|
+
title?: string | null;
|
|
48
|
+
rating?: number | null;
|
|
49
|
+
vote?: VoteType | null;
|
|
50
|
+
pollOptions?: string[] | null;
|
|
51
|
+
pollSelected?: string[] | null;
|
|
52
|
+
createdAt: string;
|
|
53
|
+
}
|
|
43
54
|
interface PollResults {
|
|
44
55
|
[option: string]: number;
|
|
45
56
|
}
|
|
@@ -124,6 +135,14 @@ declare function useGotcha(): {
|
|
|
124
135
|
/** The API client for manual submissions */
|
|
125
136
|
client: {
|
|
126
137
|
submitResponse(payload: Omit<SubmitResponsePayload, "context">): Promise<GotchaResponse>;
|
|
138
|
+
checkExistingResponse(elementId: string, userId: string): Promise<ExistingResponse | null>;
|
|
139
|
+
updateResponse(id: string, payload: {
|
|
140
|
+
content?: string;
|
|
141
|
+
title?: string;
|
|
142
|
+
rating?: number;
|
|
143
|
+
vote?: VoteType;
|
|
144
|
+
pollSelected?: string[];
|
|
145
|
+
}, userId?: string): Promise<GotchaResponse>;
|
|
127
146
|
getBaseUrl(): string;
|
|
128
147
|
};
|
|
129
148
|
/** Whether Gotcha is globally disabled */
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime'),reactDom=require('react-dom');var
|
|
1
|
+
'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime'),reactDom=require('react-dom');var Ee="https://api.gotcha.cx/v1";var se={ANONYMOUS_ID:"gotcha_anonymous_id"},T={POSITION:"top-right",SIZE:"md",THEME:"light",SHOW_ON_HOVER:true,TOUCH_BEHAVIOR:"always-visible",SUBMIT_TEXT:"Submit",THANK_YOU_MESSAGE:"Thanks for your feedback!"};var X={MAX_RETRIES:2,BASE_DELAY_MS:500,MAX_DELAY_MS:5e3};function Re(){if(typeof window>"u")return `anon_${crypto.randomUUID()}`;let e=localStorage.getItem(se.ANONYMOUS_ID);if(e)return e;let s=`anon_${crypto.randomUUID()}`;return localStorage.setItem(se.ANONYMOUS_ID,s),s}var Q={maxRetries:X.MAX_RETRIES,baseDelayMs:X.BASE_DELAY_MS,maxDelayMs:X.MAX_DELAY_MS};async function ie(e,s,i=Q,n=false){let p=null;for(let a=0;a<=i.maxRetries;a++){try{n&&a>0&&console.log(`[Gotcha] Retry attempt ${a}/${i.maxRetries}`);let t=await fetch(e,s);if(t.status>=400&&t.status<500&&t.status!==429||t.ok)return t;p=new Error(`HTTP ${t.status}`);}catch(t){p=t,n&&console.log(`[Gotcha] Network error: ${p.message}`);}if(a<i.maxRetries){let t=Math.min(i.baseDelayMs*Math.pow(2,a),i.maxDelayMs);await new Promise(u=>setTimeout(u,t));}}throw p}function ke(e){let{apiKey:s,baseUrl:i=Ee,debug:n=false}=e,p={"Content-Type":"application/json",Authorization:`Bearer ${s}`};async function a(t,u,r){let c=`${i}${u}`,l=crypto.randomUUID();n&&console.log(`[Gotcha] ${t} ${u}`,r);let f=await ie(c,{method:t,headers:{...p,"Idempotency-Key":l},body:r?JSON.stringify(r):void 0},Q,n),o=await f.json();if(!f.ok){let d=o.error;throw n&&console.error(`[Gotcha] Error: ${d.code} - ${d.message}`),d}return n&&console.log("[Gotcha] Response:",o),o}return {async submitResponse(t){let u=t.user||{};u.id||(u.id=Re());let r={...t,user:u,context:{url:typeof window<"u"?window.location.href:void 0,userAgent:typeof navigator<"u"?navigator.userAgent:void 0}};return a("POST","/responses",r)},async checkExistingResponse(t,u){let r=`${i}/responses/check?elementId=${encodeURIComponent(t)}&userId=${encodeURIComponent(u)}`;n&&console.log("[Gotcha] GET /responses/check");let c=await ie(r,{method:"GET",headers:p},Q,n),l=await c.json();if(!c.ok){let f=l.error;throw n&&console.error(`[Gotcha] Error: ${f.code} - ${f.message}`),f}return l.exists?(n&&console.log("[Gotcha] Found existing response:",l.response),l.response):null},async updateResponse(t,u,r){let c=`${i}/responses/${t}${r?`?userId=${encodeURIComponent(r)}`:""}`;n&&console.log(`[Gotcha] PATCH /responses/${t}`,u);let l=await ie(c,{method:"PATCH",headers:p,body:JSON.stringify(u)},Q,n),f=await l.json();if(!l.ok){let o=f.error;throw n&&console.error(`[Gotcha] Error: ${o.code} - ${o.message}`),o}return n&&console.log("[Gotcha] Response updated:",f),f},getBaseUrl(){return i}}}var Ge=react.createContext(null);function He({apiKey:e,children:s,baseUrl:i,debug:n=false,disabled:p=false,defaultUser:a={}}){let[t,u]=react.useState(null),r=react.useMemo(()=>ke({apiKey:e,baseUrl:i,debug:n}),[e,i,n]),c=react.useCallback(o=>{u(o);},[]),l=react.useCallback(()=>{u(null);},[]),f=react.useMemo(()=>({client:r,disabled:p,defaultUser:a,debug:n,activeModalId:t,openModal:c,closeModal:l}),[r,p,a,n,t,c,l]);return jsxRuntime.jsx(Ge.Provider,{value:f,children:s})}function _(){let e=react.useContext(Ge);if(!e)throw new Error("useGotchaContext must be used within a GotchaProvider");return e}function Ie(e){let{client:s,defaultUser:i}=_(),[n,p]=react.useState(false),[a,t]=react.useState(false),[u,r]=react.useState(null),[c,l]=react.useState(null);return react.useEffect(()=>{let o=e.user?.id||i?.id;if(!o){l(null);return}let d=false;return (async()=>{t(true);try{let h=await s.checkExistingResponse(e.elementId,o);d||l(h);}catch{d||l(null);}finally{d||t(false);}})(),()=>{d=true;}},[s,e.elementId,e.user?.id,i?.id]),{submit:react.useCallback(async o=>{p(true),r(null);try{let d=e.user?.id||i?.id,m;return c&&d?m=await s.updateResponse(c.id,{content:o.content,title:o.title,rating:o.rating,vote:o.vote,pollSelected:o.pollSelected},d):m=await s.submitResponse({elementId:e.elementId,mode:e.mode,content:o.content,title:o.title,rating:o.rating,vote:o.vote,pollOptions:e.pollOptions,pollSelected:o.pollSelected,experimentId:e.experimentId,variant:e.variant,user:{...i,...e.user}}),e.onSuccess?.(m),m}catch(d){let m=d instanceof Error?d.message:"Something went wrong";throw r(m),e.onError?.(d instanceof Error?d:new Error(m)),d}finally{p(false);}},[s,i,e,c]),isLoading:n,isCheckingExisting:a,error:u,existingResponse:c,isEditing:!!c,clearError:()=>r(null)}}function j(...e){return e.filter(Boolean).join(" ")}var O=()=>typeof window>"u"?false:"ontouchstart"in window||navigator.maxTouchPoints>0,Me=(e,s)=>{let i={sm:{desktop:24,mobile:32},md:{desktop:32,mobile:36},lg:{desktop:40,mobile:40}};return s?i[e].mobile:i[e].desktop};function Ce({size:e,theme:s,customStyles:i,showOnHover:n,touchBehavior:p,onClick:a,isOpen:t,isParentHovered:u=false}){let[r,c]=react.useState(false),[l,f]=react.useState(false),[o,d]=react.useState("light");react.useEffect(()=>{c(O());let g=window.matchMedia("(prefers-color-scheme: dark)");d(g.matches?"dark":"light");let I=P=>d(P.matches?"dark":"light");return g.addEventListener("change",I),()=>g.removeEventListener("change",I)},[]);let m=t?true:!r&&n?u:r&&p==="tap-to-reveal"?l:true,h=()=>{if(r&&p==="tap-to-reveal"&&!l){f(true);return}a();},b=Me(e,r),S=s==="auto"?o:s,R={width:b,height:b,borderRadius:"50%",border:"none",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:S==="dark"?"#374151":"#c7d2dc",color:S==="dark"?"#e5e7eb":"#4b5563",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.1)",transition:"opacity 0.2s ease-out, transform 0.2s ease-out",opacity:m?1:0,transform:m?"scale(1)":"scale(0.6)",pointerEvents:m?"auto":"none",...i?.button};return jsxRuntime.jsx("button",{type:"button",onClick:h,style:R,className:j("gotcha-button",t&&"gotcha-button--open"),"aria-label":"Give feedback on this feature","aria-expanded":t,"aria-haspopup":"dialog",children:jsxRuntime.jsx(We,{size:b*.75})})}function We({size:e}){return jsxRuntime.jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:jsxRuntime.jsx("text",{x:"50%",y:"50%",dominantBaseline:"central",textAnchor:"middle",fontSize:"16",fontWeight:"bold",fill:"currentColor",fontFamily:"system-ui, -apple-system, sans-serif",children:"G"})})}function B({size:e=16,color:s="currentColor"}){return jsxRuntime.jsxs("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",style:{animation:"gotcha-spin 1s linear infinite"},children:[jsxRuntime.jsx("style",{children:`
|
|
2
2
|
@keyframes gotcha-spin {
|
|
3
3
|
from { transform: rotate(0deg); }
|
|
4
4
|
to { transform: rotate(360deg); }
|
|
5
5
|
}
|
|
6
|
-
`}),jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:r,strokeWidth:"3",strokeOpacity:"0.25"}),jsxRuntime.jsx("path",{d:"M12 2a10 10 0 0 1 10 10",stroke:r,strokeWidth:"3",strokeLinecap:"round"})]})}function Me({theme:e,placeholder:r,submitText:s,isLoading:o,onSubmit:c,customStyles:l}){let[n,d]=react.useState(""),[t,a]=react.useState(null),[i,u]=react.useState(false);react.useEffect(()=>{u(_());},[]);let p=e==="dark",m=g=>{g.preventDefault(),!(!n.trim()&&t===null)&&c({content:n.trim()||void 0,rating:t??void 0});},S={width:"100%",padding:i?"12px 14px":"10px 12px",border:`1px solid ${p?"#374151":"#d1d5db"}`,borderRadius:i?8:6,backgroundColor:p?"#374151":"#ffffff",color:p?"#f9fafb":"#111827",fontSize:i?16:14,resize:"vertical",minHeight:i?100:80,fontFamily:"inherit",...l?.input},v={width:"100%",padding:i?"14px 16px":"10px 16px",border:"none",borderRadius:i?8:6,backgroundColor:o?p?"#4b5563":"#9ca3af":"#6366f1",color:"#ffffff",fontSize:i?16:14,fontWeight:500,cursor:o?"not-allowed":"pointer",transition:"background-color 150ms ease",...l?.submitButton};return jsxRuntime.jsxs("form",{onSubmit:m,children:[jsxRuntime.jsx("div",{style:{marginBottom:i?16:12},children:jsxRuntime.jsx(Fe,{value:t,onChange:a,isDark:p,isTouch:i})}),jsxRuntime.jsx("textarea",{value:n,onChange:g=>d(g.target.value),placeholder:r||"Share your thoughts...",style:S,disabled:o,"aria-label":"Your feedback"}),jsxRuntime.jsxs("button",{type:"submit",disabled:o||!n.trim()&&t===null,style:{...v,marginTop:12,opacity:!n.trim()&&t===null?.5:1,display:"flex",alignItems:"center",justifyContent:"center",gap:8},children:[o&&jsxRuntime.jsx(B,{size:i?18:16,color:"#ffffff"}),o?"Submitting...":s]})]})}function Fe({value:e,onChange:r,isDark:s,isTouch:o}){let[c,l]=react.useState(null),n=o?32:20,d=o?6:2;return jsxRuntime.jsx("div",{style:{display:"flex",gap:o?8:4},role:"group","aria-label":"Rating",children:[1,2,3,4,5].map(t=>{let a=(c??e??0)>=t;return jsxRuntime.jsx("button",{type:"button",onClick:()=>r(t),onMouseEnter:()=>l(t),onMouseLeave:()=>l(null),"aria-label":`Rate ${t} out of 5`,"aria-pressed":e===t,style:{background:"none",border:"none",cursor:"pointer",padding:d,color:a?"#f59e0b":s?"#4b5563":"#d1d5db",transition:"color 150ms ease"},children:jsxRuntime.jsx("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"currentColor",children:jsxRuntime.jsx("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"})})},t)})})}function Ce({theme:e,isLoading:r,onSubmit:s}){let[o,c]=react.useState(false),[l,n]=react.useState(null);react.useEffect(()=>{c(_());},[]),react.useEffect(()=>{r||n(null);},[r]);let d=u=>{n(u),s({vote:u});},t=e==="dark",a={flex:1,padding:o?"16px 20px":"12px 16px",border:`1px solid ${t?"#374151":"#e5e7eb"}`,borderRadius:o?12:8,backgroundColor:t?"#374151":"#f9fafb",color:t?"#f9fafb":"#111827",fontSize:o?28:24,cursor:r?"not-allowed":"pointer",transition:"all 150ms ease",display:"flex",alignItems:"center",justifyContent:"center",gap:o?10:8},i=o?28:24;return jsxRuntime.jsxs("div",{style:{display:"flex",gap:o?16:12},role:"group","aria-label":"Vote",children:[jsxRuntime.jsx("button",{type:"button",onClick:()=>d("up"),disabled:r,style:a,"aria-label":"Vote up - I like this",children:r&&l==="up"?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(B,{size:i,color:t?"#f9fafb":"#111827"}),jsxRuntime.jsx("span",{style:{fontSize:o?16:14,fontWeight:500},children:"Sending..."})]}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx($e,{size:i}),jsxRuntime.jsx("span",{style:{fontSize:o?16:14,fontWeight:500},children:"Like"})]})}),jsxRuntime.jsx("button",{type:"button",onClick:()=>d("down"),disabled:r,style:a,"aria-label":"Vote down - I don't like this",children:r&&l==="down"?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(B,{size:i,color:t?"#f9fafb":"#111827"}),jsxRuntime.jsx("span",{style:{fontSize:o?16:14,fontWeight:500},children:"Sending..."})]}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(Ke,{size:i}),jsxRuntime.jsx("span",{style:{fontSize:o?16:14,fontWeight:500},children:"Dislike"})]})})]})}function $e({size:e=24}){return jsxRuntime.jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:jsxRuntime.jsx("path",{d:"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"})})}function Ke({size:e=24}){return jsxRuntime.jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:jsxRuntime.jsx("path",{d:"M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"})})}function se({mode:e,theme:r,customStyles:s,promptText:o,placeholder:c,submitText:l,thankYouMessage:n,isLoading:d,isSubmitted:t,error:a,onSubmit:i,onClose:u,anchorRect:p}){let m=react.useRef(null),S=react.useRef(null),[v,g]=react.useState(false),[f,C]=react.useState(false),[G,k]=react.useState("light");react.useEffect(()=>{C(window.innerWidth<640);let x=window.matchMedia("(prefers-color-scheme: dark)");k(x.matches?"dark":"light");let w=y=>k(y.matches?"dark":"light");return x.addEventListener("change",w),()=>x.removeEventListener("change",w)},[]),react.useEffect(()=>{let x=requestAnimationFrame(()=>g(true));return ()=>cancelAnimationFrame(x)},[]);let T=r==="auto"?G:r,b=T==="dark",P=(p?window.innerHeight-p.bottom:window.innerHeight/2)<280+20;react.useEffect(()=>{let x=m.current;if(!x)return;S.current?.focus();let w=y=>{if(y.key==="Escape"){u();return}if(y.key==="Tab"){let U=x.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),N=U[0],Y=U[U.length-1];y.shiftKey&&document.activeElement===N?(y.preventDefault(),Y?.focus()):!y.shiftKey&&document.activeElement===Y&&(y.preventDefault(),N?.focus());}};return document.addEventListener("keydown",w),()=>document.removeEventListener("keydown",w)},[u]);let O=e==="vote"?"What do you think?":"What do you think of this feature?",D=f?20:16,L=f?{position:"fixed",left:"50%",top:"50%",width:"calc(100vw - 32px)",maxWidth:320,padding:D,borderRadius:12,backgroundColor:b?"#1f2937":"#ffffff",color:b?"#f9fafb":"#111827",boxShadow:"0 10px 25px rgba(0, 0, 0, 0.2)",border:`1px solid ${b?"#374151":"#e5e7eb"}`,zIndex:9999,transition:"opacity 0.2s ease-out, transform 0.2s ease-out",opacity:v?1:0,transform:v?"translate(-50%, -50%) scale(1)":"translate(-50%, -50%) scale(0.95)",...s?.modal}:{position:"absolute",left:"50%",width:320,padding:D,borderRadius:8,backgroundColor:b?"#1f2937":"#ffffff",color:b?"#f9fafb":"#111827",boxShadow:"0 10px 25px rgba(0, 0, 0, 0.15)",border:`1px solid ${b?"#374151":"#e5e7eb"}`,zIndex:9999,...P?{bottom:"100%",marginBottom:8}:{top:"100%",marginTop:8},transition:"opacity 0.2s ease-out, transform 0.2s ease-out",opacity:v?1:0,transform:v?"translateX(-50%) scale(1) translateY(0)":`translateX(-50%) scale(0.95) translateY(${P?"10px":"-10px"})`,...s?.modal};return jsxRuntime.jsxs("div",{ref:m,role:"dialog","aria-modal":"true","aria-labelledby":"gotcha-modal-title",style:L,className:K("gotcha-modal",b&&"gotcha-modal--dark"),children:[jsxRuntime.jsx("button",{ref:S,type:"button",onClick:u,"aria-label":"Close feedback form",style:{position:"absolute",top:f?12:8,right:f?12:8,width:f?36:24,height:f?36:24,border:"none",background:"none",cursor:"pointer",color:b?"#9ca3af":"#6b7280",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:4},children:jsxRuntime.jsx("svg",{width:f?18:14,height:f?18:14,viewBox:"0 0 14 14",fill:"none",children:jsxRuntime.jsx("path",{d:"M1 1L13 13M1 13L13 1",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}),jsxRuntime.jsx("h2",{id:"gotcha-modal-title",style:{margin:"0 0 12px 0",fontSize:f?16:14,fontWeight:500,paddingRight:f?40:24},children:o||O}),t&&jsxRuntime.jsxs("div",{style:{textAlign:"center",padding:"20px 0",color:b?"#10b981":"#059669"},children:[jsxRuntime.jsx("svg",{width:"32",height:"32",viewBox:"0 0 24 24",fill:"none",style:{margin:"0 auto 8px"},children:jsxRuntime.jsx("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),jsxRuntime.jsx("p",{style:{margin:0,fontSize:14},children:n})]}),a&&!t&&jsxRuntime.jsx("div",{style:{padding:8,marginBottom:12,borderRadius:4,backgroundColor:b?"#7f1d1d":"#fef2f2",color:b?"#fecaca":"#dc2626",fontSize:13},children:a}),!t&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[e==="feedback"&&jsxRuntime.jsx(Me,{theme:T,placeholder:c,submitText:l,isLoading:d,onSubmit:i,customStyles:s}),e==="vote"&&jsxRuntime.jsx(Ce,{theme:T,isLoading:d,onSubmit:i})]}),jsxRuntime.jsxs("div",{"aria-live":"polite",className:"sr-only",style:{position:"absolute",left:-9999},children:[t&&"Thank you! Your feedback has been submitted.",a&&`Error: ${a}`]})]})}function Ze({elementId:e,user:r,mode:s="feedback",experimentId:o,variant:c,options:l,allowMultiple:n=false,showResults:d=true,position:t=M.POSITION,size:a=M.SIZE,theme:i=M.THEME,customStyles:u,visible:p=true,showOnHover:m=M.SHOW_ON_HOVER,touchBehavior:S=M.TOUCH_BEHAVIOR,promptText:v,placeholder:g,submitText:f=M.SUBMIT_TEXT,thankYouMessage:C=M.THANK_YOU_MESSAGE,onSubmit:G,onOpen:k,onClose:T,onError:b}){let{disabled:ae,activeModalId:le,openModal:P,closeModal:O}=A(),[D,L]=react.useState(false),[x,w]=react.useState(false),[y,U]=react.useState(null),[N,Y]=react.useState(false),W=react.useRef(null);react.useEffect(()=>{Y(window.innerWidth<640);},[]);let F=le===e;react.useEffect(()=>{if(!m)return;let E=W.current;if(!E)return;let z=E.parentElement;if(!z)return;let fe=()=>w(true),me=()=>w(false);return z.addEventListener("mouseenter",fe),z.addEventListener("mouseleave",me),()=>{z.removeEventListener("mouseenter",fe),z.removeEventListener("mouseleave",me);}},[m]);let{submit:ce,isLoading:de,error:ue}=Re({elementId:e,mode:s,experimentId:o,variant:c,pollOptions:l,user:r,onSuccess:E=>{L(true),G?.(E),setTimeout(()=>{O(),L(false);},2500);},onError:E=>{b?.(E);}}),Pe=react.useCallback(()=>{W.current&&U(W.current.getBoundingClientRect()),P(e),k?.();},[e,P,k]),J=react.useCallback(()=>{O(),L(false),T?.();},[O,T]),pe=react.useCallback(E=>{ce(E);},[ce]);return ae||!p?null:jsxRuntime.jsxs("div",{ref:W,style:{...{"top-right":{position:"absolute",top:0,right:0,transform:"translate(50%, -50%)"},"top-left":{position:"absolute",top:0,left:0,transform:"translate(-50%, -50%)"},"bottom-right":{position:"absolute",bottom:0,right:0,transform:"translate(50%, 50%)"},"bottom-left":{position:"absolute",bottom:0,left:0,transform:"translate(-50%, 50%)"},inline:{position:"relative",display:"inline-flex"}}[t],zIndex:F?1e4:"auto"},className:"gotcha-container","data-gotcha-element":e,children:[jsxRuntime.jsx(Te,{size:a,theme:i,customStyles:u,showOnHover:m,touchBehavior:S,onClick:Pe,isOpen:F,isParentHovered:x}),F&&!N&&jsxRuntime.jsx(se,{mode:s,theme:i,customStyles:u,promptText:v,placeholder:g,submitText:f,thankYouMessage:C,isLoading:de,isSubmitted:D,error:ue,onSubmit:pe,onClose:J,anchorRect:y||void 0}),F&&N&&reactDom.createPortal(jsxRuntime.jsx("div",{style:{position:"fixed",inset:0,zIndex:99999,backgroundColor:"rgba(0, 0, 0, 0.3)"},onClick:J,"aria-hidden":"true",children:jsxRuntime.jsx("div",{onClick:E=>E.stopPropagation(),children:jsxRuntime.jsx(se,{mode:s,theme:i,customStyles:u,promptText:v,placeholder:g,submitText:f,thankYouMessage:C,isLoading:de,isSubmitted:D,error:ue,onSubmit:pe,onClose:J,anchorRect:y||void 0})})}),document.body)]})}function Je(){let{client:e,disabled:r,defaultUser:s,debug:o}=A();return {client:e,disabled:r,defaultUser:s,debug:o,submitFeedback:e.submitResponse.bind(e)}}exports.Gotcha=Ze;exports.GotchaProvider=Ne;exports.useGotcha=Je;//# sourceMappingURL=index.js.map
|
|
6
|
+
`}),jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:s,strokeWidth:"3",strokeOpacity:"0.25"}),jsxRuntime.jsx("path",{d:"M12 2a10 10 0 0 1 10 10",stroke:s,strokeWidth:"3",strokeLinecap:"round"})]})}function _e({theme:e,placeholder:s,submitText:i,isLoading:n,onSubmit:p,customStyles:a,initialValues:t,isEditing:u=false}){let[r,c]=react.useState(t?.content||""),[l,f]=react.useState(t?.rating??null),[o,d]=react.useState(false);react.useEffect(()=>{d(O());},[]),react.useEffect(()=>{t?.content!==void 0&&c(t.content||""),t?.rating!==void 0&&f(t.rating??null);},[t?.content,t?.rating]);let m=e==="dark",h=R=>{R.preventDefault(),!(!r.trim()&&l===null)&&p({content:r.trim()||void 0,rating:l??void 0});},b={width:"100%",padding:o?"12px 14px":"10px 12px",border:`1px solid ${m?"#374151":"#d1d5db"}`,borderRadius:o?8:6,backgroundColor:m?"#374151":"#ffffff",color:m?"#f9fafb":"#111827",fontSize:o?16:14,resize:"vertical",minHeight:o?100:80,fontFamily:"inherit",...a?.input},S={width:"100%",padding:o?"14px 16px":"10px 16px",border:"none",borderRadius:o?8:6,backgroundColor:n?m?"#4b5563":"#9ca3af":"#6366f1",color:"#ffffff",fontSize:o?16:14,fontWeight:500,cursor:n?"not-allowed":"pointer",transition:"background-color 150ms ease",...a?.submitButton};return jsxRuntime.jsxs("form",{onSubmit:h,children:[jsxRuntime.jsx("div",{style:{marginBottom:o?16:12},children:jsxRuntime.jsx(Xe,{value:l,onChange:f,isDark:m,isTouch:o})}),jsxRuntime.jsx("textarea",{value:r,onChange:R=>c(R.target.value),placeholder:s||"Share your thoughts...",style:b,disabled:n,"aria-label":"Your feedback"}),jsxRuntime.jsxs("button",{type:"submit",disabled:n||!r.trim()&&l===null,style:{...S,marginTop:12,opacity:!r.trim()&&l===null?.5:1,display:"flex",alignItems:"center",justifyContent:"center",gap:8},children:[n&&jsxRuntime.jsx(B,{size:o?18:16,color:"#ffffff"}),n?u?"Updating...":"Submitting...":u?"Update":i]})]})}function Xe({value:e,onChange:s,isDark:i,isTouch:n}){let[p,a]=react.useState(null),t=n?32:20,u=n?6:2;return jsxRuntime.jsx("div",{style:{display:"flex",gap:n?8:4},role:"group","aria-label":"Rating",children:[1,2,3,4,5].map(r=>{let c=(p??e??0)>=r;return jsxRuntime.jsx("button",{type:"button",onClick:()=>s(r),onMouseEnter:()=>a(r),onMouseLeave:()=>a(null),"aria-label":`Rate ${r} out of 5`,"aria-pressed":e===r,style:{background:"none",border:"none",cursor:"pointer",padding:u,color:c?"#f59e0b":i?"#4b5563":"#d1d5db",transition:"color 150ms ease"},children:jsxRuntime.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"currentColor",children:jsxRuntime.jsx("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"})})},r)})})}function Oe({theme:e,isLoading:s,onSubmit:i,initialVote:n,isEditing:p=false}){let[a,t]=react.useState(false),[u,r]=react.useState(n||null),[c,l]=react.useState(n||null);react.useEffect(()=>{t(O());},[]),react.useEffect(()=>{n!==void 0&&(l(n),r(n));},[n]),react.useEffect(()=>{!s&&!p&&r(null);},[s,p]);let f=h=>{r(h),i({vote:h});},o=e==="dark",d=h=>{let b=c===h;return {flex:1,padding:a?"16px 20px":"12px 16px",border:b?`2px solid ${h==="up"?"#22c55e":"#ef4444"}`:`1px solid ${o?"#374151":"#e5e7eb"}`,borderRadius:a?12:8,backgroundColor:b?h==="up"?o?"#14532d":"#dcfce7":o?"#450a0a":"#fee2e2":o?"#374151":"#f9fafb",color:o?"#f9fafb":"#111827",fontSize:a?28:24,cursor:s?"not-allowed":"pointer",transition:"all 150ms ease",display:"flex",alignItems:"center",justifyContent:"center",gap:a?10:8}},m=a?28:24;return jsxRuntime.jsxs("div",{style:{display:"flex",gap:a?16:12},role:"group","aria-label":"Vote",children:[jsxRuntime.jsx("button",{type:"button",onClick:()=>f("up"),disabled:s,style:d("up"),"aria-label":"Vote up - I like this","aria-pressed":c==="up",children:s&&u==="up"?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(B,{size:m,color:o?"#f9fafb":"#111827"}),jsxRuntime.jsx("span",{style:{fontSize:a?16:14,fontWeight:500},children:p?"Updating...":"Sending..."})]}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(Qe,{size:m}),jsxRuntime.jsx("span",{style:{fontSize:a?16:14,fontWeight:500},children:c==="up"?"Liked":"Like"})]})}),jsxRuntime.jsx("button",{type:"button",onClick:()=>f("down"),disabled:s,style:d("down"),"aria-label":"Vote down - I don't like this","aria-pressed":c==="down",children:s&&u==="down"?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(B,{size:m,color:o?"#f9fafb":"#111827"}),jsxRuntime.jsx("span",{style:{fontSize:a?16:14,fontWeight:500},children:p?"Updating...":"Sending..."})]}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(qe,{size:m}),jsxRuntime.jsx("span",{style:{fontSize:a?16:14,fontWeight:500},children:c==="down"?"Disliked":"Dislike"})]})})]})}function Qe({size:e=24}){return jsxRuntime.jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:jsxRuntime.jsx("path",{d:"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"})})}function qe({size:e=24}){return jsxRuntime.jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:jsxRuntime.jsx("path",{d:"M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"})})}function fe({mode:e,theme:s,customStyles:i,promptText:n,placeholder:p,submitText:a,thankYouMessage:t,isLoading:u,isSubmitted:r,error:c,existingResponse:l,isEditing:f=false,onSubmit:o,onClose:d,anchorRect:m}){let h=react.useRef(null),b=react.useRef(null),[S,R]=react.useState(false),[g,I]=react.useState(false),[P,Y]=react.useState("light");react.useEffect(()=>{I(window.innerWidth<640);let x=window.matchMedia("(prefers-color-scheme: dark)");Y(x.matches?"dark":"light");let M=E=>Y(E.matches?"dark":"light");return x.addEventListener("change",M),()=>x.removeEventListener("change",M)},[]),react.useEffect(()=>{let x=requestAnimationFrame(()=>R(true));return ()=>cancelAnimationFrame(x)},[]);let D=s==="auto"?P:s,y=D==="dark",U=(m?window.innerHeight-m.bottom:window.innerHeight/2)<280+20;react.useEffect(()=>{let x=h.current;if(!x)return;b.current?.focus();let M=E=>{if(E.key==="Escape"){d();return}if(E.key==="Tab"){let N=x.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),C=N[0],A=N[N.length-1];E.shiftKey&&document.activeElement===C?(E.preventDefault(),A?.focus()):!E.shiftKey&&document.activeElement===A&&(E.preventDefault(),C?.focus());}};return document.addEventListener("keydown",M),()=>document.removeEventListener("keydown",M)},[d]);let L=e==="vote"?"What do you think?":"What do you think of this feature?",F=g?20:16,W=g?{position:"fixed",left:"50%",top:"50%",width:"calc(100vw - 32px)",maxWidth:320,padding:F,borderRadius:12,backgroundColor:y?"#1f2937":"#ffffff",color:y?"#f9fafb":"#111827",boxShadow:"0 10px 25px rgba(0, 0, 0, 0.2)",border:`1px solid ${y?"#374151":"#e5e7eb"}`,zIndex:9999,transition:"opacity 0.2s ease-out, transform 0.2s ease-out",opacity:S?1:0,transform:S?"translate(-50%, -50%) scale(1)":"translate(-50%, -50%) scale(0.95)",...i?.modal}:{position:"absolute",left:"50%",width:320,padding:F,borderRadius:8,backgroundColor:y?"#1f2937":"#ffffff",color:y?"#f9fafb":"#111827",boxShadow:"0 10px 25px rgba(0, 0, 0, 0.15)",border:`1px solid ${y?"#374151":"#e5e7eb"}`,zIndex:9999,...U?{bottom:"100%",marginBottom:8}:{top:"100%",marginTop:8},transition:"opacity 0.2s ease-out, transform 0.2s ease-out",opacity:S?1:0,transform:S?"translateX(-50%) scale(1) translateY(0)":`translateX(-50%) scale(0.95) translateY(${U?"10px":"-10px"})`,...i?.modal};return jsxRuntime.jsxs("div",{ref:h,role:"dialog","aria-modal":"true","aria-labelledby":"gotcha-modal-title",style:W,className:j("gotcha-modal",y&&"gotcha-modal--dark"),children:[jsxRuntime.jsx("button",{ref:b,type:"button",onClick:d,"aria-label":"Close feedback form",style:{position:"absolute",top:g?12:8,right:g?12:8,width:g?36:24,height:g?36:24,border:"none",background:"none",cursor:"pointer",color:y?"#9ca3af":"#6b7280",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:4},children:jsxRuntime.jsx("svg",{width:g?18:14,height:g?18:14,viewBox:"0 0 14 14",fill:"none",children:jsxRuntime.jsx("path",{d:"M1 1L13 13M1 13L13 1",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}),jsxRuntime.jsx("h2",{id:"gotcha-modal-title",style:{margin:"0 0 12px 0",fontSize:g?16:14,fontWeight:500,paddingRight:g?40:24},children:n||L}),r&&jsxRuntime.jsxs("div",{style:{textAlign:"center",padding:"20px 0",color:y?"#10b981":"#059669"},children:[jsxRuntime.jsx("svg",{width:"32",height:"32",viewBox:"0 0 24 24",fill:"none",style:{margin:"0 auto 8px"},children:jsxRuntime.jsx("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),jsxRuntime.jsx("p",{style:{margin:0,fontSize:14},children:t})]}),c&&!r&&jsxRuntime.jsx("div",{style:{padding:8,marginBottom:12,borderRadius:4,backgroundColor:y?"#7f1d1d":"#fef2f2",color:y?"#fecaca":"#dc2626",fontSize:13},children:c}),!r&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[e==="feedback"&&jsxRuntime.jsx(_e,{theme:D,placeholder:p,submitText:a,isLoading:u,onSubmit:o,customStyles:i,initialValues:l?{content:l.content,rating:l.rating}:void 0,isEditing:f}),e==="vote"&&jsxRuntime.jsx(Oe,{theme:D,isLoading:u,onSubmit:o,initialVote:l?.vote||void 0,isEditing:f})]}),jsxRuntime.jsxs("div",{"aria-live":"polite",className:"sr-only",style:{position:"absolute",left:-9999},children:[r&&"Thank you! Your feedback has been submitted.",c&&`Error: ${c}`]})]})}function et({elementId:e,user:s,mode:i="feedback",experimentId:n,variant:p,options:a,allowMultiple:t=false,showResults:u=true,position:r=T.POSITION,size:c=T.SIZE,theme:l=T.THEME,customStyles:f,visible:o=true,showOnHover:d=T.SHOW_ON_HOVER,touchBehavior:m=T.TOUCH_BEHAVIOR,promptText:h,placeholder:b,submitText:S=T.SUBMIT_TEXT,thankYouMessage:R=T.THANK_YOU_MESSAGE,onSubmit:g,onOpen:I,onClose:P,onError:Y}){let{disabled:D,activeModalId:y,openModal:ne,closeModal:V}=_(),[U,L]=react.useState(false),[F,W]=react.useState(false),[x,M]=react.useState(null),[E,N]=react.useState(false),C=react.useRef(null);react.useEffect(()=>{N(window.innerWidth<640);},[]);let A=y===e;react.useEffect(()=>{if(!d)return;let k=C.current;if(!k)return;let z=k.parentElement;if(!z)return;let Se=()=>W(true),xe=()=>W(false);return z.addEventListener("mouseenter",Se),z.addEventListener("mouseleave",xe),()=>{z.removeEventListener("mouseenter",Se),z.removeEventListener("mouseleave",xe);}},[d]);let{submit:he,isLoading:ge,error:be,existingResponse:ve,isEditing:K}=Ie({elementId:e,mode:i,experimentId:n,variant:p,pollOptions:a,user:s,onSuccess:k=>{L(true),g?.(k),setTimeout(()=>{V(),L(false);},2500);},onError:k=>{Y?.(k);}}),Le=react.useCallback(()=>{C.current&&M(C.current.getBoundingClientRect()),ne(e),I?.();},[e,ne,I]),re=react.useCallback(()=>{V(),L(false),P?.();},[V,P]),ye=react.useCallback(k=>{he(k);},[he]);return D||!o?null:jsxRuntime.jsxs("div",{ref:C,style:{...{"top-right":{position:"absolute",top:0,right:0,transform:"translate(50%, -50%)"},"top-left":{position:"absolute",top:0,left:0,transform:"translate(-50%, -50%)"},"bottom-right":{position:"absolute",bottom:0,right:0,transform:"translate(50%, 50%)"},"bottom-left":{position:"absolute",bottom:0,left:0,transform:"translate(-50%, 50%)"},inline:{position:"relative",display:"inline-flex"}}[r],zIndex:A?1e4:"auto"},className:"gotcha-container","data-gotcha-element":e,children:[jsxRuntime.jsx(Ce,{size:c,theme:l,customStyles:f,showOnHover:d,touchBehavior:m,onClick:Le,isOpen:A,isParentHovered:F}),A&&!E&&jsxRuntime.jsx(fe,{mode:i,theme:l,customStyles:f,promptText:h,placeholder:b,submitText:S,thankYouMessage:K?"Your feedback has been updated!":R,isLoading:ge,isSubmitted:U,error:be,existingResponse:ve,isEditing:K,onSubmit:ye,onClose:re,anchorRect:x||void 0}),A&&E&&reactDom.createPortal(jsxRuntime.jsx("div",{style:{position:"fixed",inset:0,zIndex:99999,backgroundColor:"rgba(0, 0, 0, 0.3)"},onClick:re,"aria-hidden":"true",children:jsxRuntime.jsx("div",{onClick:k=>k.stopPropagation(),children:jsxRuntime.jsx(fe,{mode:i,theme:l,customStyles:f,promptText:h,placeholder:b,submitText:S,thankYouMessage:K?"Your feedback has been updated!":R,isLoading:ge,isSubmitted:U,error:be,existingResponse:ve,isEditing:K,onSubmit:ye,onClose:re,anchorRect:x||void 0})})}),document.body)]})}function ot(){let{client:e,disabled:s,defaultUser:i,debug:n}=_();return {client:e,disabled:s,defaultUser:i,debug:n,submitFeedback:e.submitResponse.bind(e)}}exports.Gotcha=et;exports.GotchaProvider=He;exports.useGotcha=ot;//# sourceMappingURL=index.js.map
|
|
7
7
|
//# sourceMappingURL=index.js.map
|