Skip to content

Commit 41cdea4

Browse files
Alexander-TurkinAlexander-Turkin
authored
feat(condo): DOMA-13034 update analytics and add survey styles (#7355)
* feat(condo): DOMA-13034 update analytics and add survey styles * feat(condo): DOMA-13034 fix * feat(condo): DOMA-13034 fix * feat(condo): DOMA-13034 review fix * feat(condo): DOMA-13034 fix * feat(condo): DOMA-13034 review fix * feat(condo): DOMA-13034 review fix * feat(condo): DOMA-13034 update ff provider * feat(condo): DOMA-13034 update ff provider * feat(condo): DOMA-13034 delete comment * feat(condo): DOMA-13034 fix types * feat(condo): DOMA-13034 fix types * feat(condo): DOMA-13034 review fix * feat(condo): DOMA-13034 review fix * feat(condo): DOMA-13034 review fix * feat(condo): DOMA-13034 delete gb updates * feat(condo): DOMA-13034 delete gb updates * feat(condo): DOMA-13034 add TODO
1 parent 4488a0f commit 41cdea4

5 files changed

Lines changed: 224 additions & 29 deletions

File tree

‎apps/condo/domains/common/components/CondoAppEventsHandler.tsx‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useAuth } from '@open-condo/next/auth'
55
import { useOrganization } from '@open-condo/next/organization'
66

77
import { analytics } from '@condo/domains/common/utils/analytics'
8+
import { clearPostHogInlineStyles, injectPostHogSurveyStyles, createSurveyBackdrop } from '@condo/domains/common/utils/posthogSurveyStyles'
89
import { STAFF } from '@condo/domains/user/constants/common'
910

1011
import { usePostMessageContext } from './PostMessageProvider'
@@ -22,15 +23,17 @@ export const CondoAppEventsHandler: FC = () => {
2223
useEffect(() => {
2324
if (!userLoading) {
2425
if (user) {
26+
// TODO DOMA-13100 get user data from props
2527
analytics.identify(user.id, {
2628
name: user?.name,
2729
type: user?.type || STAFF,
30+
'organization.id': employee?.organization?.id,
2831
})
2932
} else {
3033
analytics.reset()
3134
}
3235
}
33-
}, [userLoading, user])
36+
}, [userLoading, user, employee?.organization?.id])
3437

3538
// Routing tracking
3639
useEffect(() => {
@@ -79,5 +82,25 @@ export const CondoAppEventsHandler: FC = () => {
7982
}
8083
}, [employee])
8184

85+
useEffect(() => {
86+
const overrideSurveyStyles = () => {
87+
clearPostHogInlineStyles()
88+
injectPostHogSurveyStyles()
89+
createSurveyBackdrop()
90+
}
91+
92+
const surveyObserver = new MutationObserver(() => {
93+
overrideSurveyStyles()
94+
})
95+
96+
surveyObserver.observe(document.body, {
97+
childList: true,
98+
})
99+
100+
return () => {
101+
surveyObserver?.disconnect()
102+
}
103+
}, [])
104+
82105
return null
83106
}

‎apps/condo/domains/common/utils/analytics.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ export type EventsData = {
9898
type UserData = {
9999
name?: string | null
100100
type?: string | null
101+
'organization.id'?: string | null
101102
}
102103

103104
type AppGroups =
@@ -118,6 +119,8 @@ function initAnalytics (): Analytics<EventsData, UserData, AppGroups> {
118119
// why 308 are not followed correctly
119120
// api_host: '/api/ph',
120121
api_host: posthogApiHost,
122+
opt_in_site_apps: true,
123+
advanced_enable_surveys: true,
121124
debug: isDebug(),
122125
autocapture: false,
123126
},

‎apps/condo/domains/common/utils/posthogSurveyStyles.ts‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
/**
2+
* Custom styles for PostHog surveys
3+
* These styles are injected into the Shadow DOM to override default PostHog styles
4+
*/
5+
6+
export const POSTHOG_SURVEY_STYLES = `
7+
.survey-backdrop {
8+
position: fixed !important;
9+
top: 0 !important;
10+
left: 0 !important;
11+
right: 0 !important;
12+
bottom: 0 !important;
13+
background: rgba(0, 0, 0, 0.5) !important;
14+
z-index: 2147482646 !important;
15+
cursor: pointer !important;
16+
}
17+
18+
.ph-survey {
19+
position: fixed !important;
20+
top: 50% !important;
21+
left: 50% !important;
22+
right: auto !important;
23+
bottom: auto !important;
24+
transform: translate(-50%, -50%) !important;
25+
border-radius: 12px !important;
26+
max-width: 600px !important;
27+
min-width: 500px !important;
28+
width: 50vw !important;
29+
min-height: 400px !important;
30+
z-index: 2147482647 !important;
31+
cursor: default !important;
32+
}
33+
34+
.ph-survey * {
35+
font-family: 'Wix Madefor Display', -apple-system, BlinkMacSystemFont, Helvetica, sans-serif !important;
36+
}
37+
38+
.survey-form {
39+
border-radius: 12px !important;
40+
overflow: hidden !important;
41+
background: white !important;
42+
border: none !important;
43+
position: relative !important;
44+
height: 100% !important
45+
}
46+
47+
.survey-box {
48+
border-radius: 12px !important;
49+
background: white !important;
50+
padding: 0 16px !important;
51+
}
52+
53+
.thank-you-message {
54+
padding: 40px !important;
55+
}
56+
57+
.question-header,
58+
.thank-you-message-header {
59+
margin-bottom: 16px !important;
60+
text-align: left !important;
61+
}
62+
63+
.survey-question {
64+
padding-right: 40px !important;
65+
}
66+
67+
.thank-you-message-header {
68+
font-size: 24px !important;
69+
font-weight: 600 !important;
70+
margin: 0 0 8px 0 !important;
71+
}
72+
73+
.survey-question,
74+
.thank-you-message-header > h3 {
75+
font-size: 24px !important;
76+
font-weight: 600 !important;
77+
margin: 0 0 40px 0 !important;
78+
}
79+
80+
.survey-question-description,
81+
.thank-you-message-header p {
82+
font-size: 14px !important;
83+
line-height: 1.5715 !important;
84+
margin: 0 !important;
85+
}
86+
87+
.form-cancel {
88+
position: absolute !important;
89+
top: 30px !important;
90+
right: 40px !important;
91+
border: none !important;
92+
background: transparent !important;
93+
transform: none !important;
94+
padding: 8px !important;
95+
cursor: pointer !important;
96+
z-index: 10 !important;
97+
}
98+
99+
.form-cancel:hover {
100+
border-radius: 8px !important;
101+
}
102+
103+
.form-cancel svg {
104+
width: 12px !important;
105+
height: 12px !important;
106+
transform: none !important;
107+
}
108+
109+
.question-container {
110+
margin-bottom: 24px !important;
111+
}
112+
113+
.question-container textarea {
114+
border-radius: 8px !important;
115+
min-height: 120px !important;
116+
margin-top: 16px !important;
117+
}
118+
119+
.bottom-section {
120+
display: flex !important;
121+
align-items: end !important;
122+
justify-content: flex-end !important;
123+
}
124+
125+
.form-submit {
126+
border-radius: 8px !important;
127+
width: auto !important;
128+
font-size: 16px !important;
129+
min-width: 120px !important;
130+
padding: 12px 20px !important;
131+
}
132+
133+
.footer-branding {
134+
display: none !important;
135+
}
136+
`
137+
138+
export function injectPostHogSurveyStyles (surveyElement?: Element | null): void {
139+
const element = surveyElement || document.querySelector('[class*="PostHogSurvey-"]')
140+
141+
if (!element?.shadowRoot) {
142+
return
143+
}
144+
145+
const existingStyle = element.shadowRoot.querySelector('#custom-survey-styles')
146+
if (existingStyle) {
147+
return
148+
}
149+
150+
const styleElement = document.createElement('style')
151+
styleElement.id = 'custom-survey-styles'
152+
styleElement.textContent = POSTHOG_SURVEY_STYLES
153+
154+
element.shadowRoot.appendChild(styleElement)
155+
}
156+
157+
export function createSurveyBackdrop (surveyElement?: Element | null): void {
158+
const element = surveyElement || document.querySelector('[class*="PostHogSurvey-"]')
159+
160+
if (!element?.shadowRoot) {
161+
return
162+
}
163+
164+
const existingBackdrop = element.shadowRoot.querySelector('.survey-backdrop')
165+
if (existingBackdrop) {
166+
return
167+
}
168+
169+
const backdrop = document.createElement('div')
170+
backdrop.className = 'survey-backdrop'
171+
172+
backdrop.addEventListener('click', () => {
173+
const closeButton = element.shadowRoot?.querySelector('.form-cancel') as HTMLButtonElement
174+
if (closeButton) {
175+
closeButton.click()
176+
}
177+
})
178+
179+
const firstChild = element.shadowRoot.firstChild
180+
if (firstChild) {
181+
element.shadowRoot.insertBefore(backdrop, firstChild)
182+
} else {
183+
element.shadowRoot.appendChild(backdrop)
184+
}
185+
}
186+
187+
export function clearPostHogInlineStyles (surveyElement?: Element | null): void {
188+
const element = surveyElement || document.querySelector('[class*="PostHogSurvey-"]')
189+
190+
if (!element) {
191+
return
192+
}
193+
194+
element.removeAttribute('style')
195+
}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@
107107
"node-fetch@2.6.1": "^2.6.7",
108108
"trim@0.0.1": "^0.0.3",
109109
"@graphql-tools/links@npm:8.3.36/form-data": "^4.0.4",
110-
"immutable@npm:^4.0.0-rc.9": "4.3.8"
110+
"immutable@npm:^4.0.0-rc.9": "4.3.8",
111+
"posthog-js": "^1.351.3"
111112
}
112113
}

‎yarn.lock‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -39030,26 +39030,6 @@ __metadata:
3903039030
languageName: node
3903139031
linkType: hard
3903239032

39033-
"posthog-js@npm:^1.116.6":
39034-
version: 1.257.0
39035-
resolution: "posthog-js@npm:1.257.0"
39036-
dependencies:
39037-
core-js: ^3.38.1
39038-
fflate: ^0.4.8
39039-
preact: ^10.19.3
39040-
web-vitals: ^4.2.4
39041-
peerDependencies:
39042-
"@rrweb/types": 2.0.0-alpha.17
39043-
rrweb-snapshot: 2.0.0-alpha.17
39044-
peerDependenciesMeta:
39045-
"@rrweb/types":
39046-
optional: true
39047-
rrweb-snapshot:
39048-
optional: true
39049-
checksum: 4f09f3399005ebdb5790a6a5f2815501b06c21c4be843563825eb7e1f00fe0b9fc39081dea8f772ae5e69670784cfd40e6e2495872a024a7bdec295d973a7c92
39050-
languageName: node
39051-
linkType: hard
39052-
3905339033
"posthog-js@npm:^1.351.3":
3905439034
version: 1.358.0
3905539035
resolution: "posthog-js@npm:1.358.0"
@@ -39078,13 +39058,6 @@ __metadata:
3907839058
languageName: node
3907939059
linkType: hard
3908039060

39081-
"preact@npm:^10.19.3":
39082-
version: 10.26.9
39083-
resolution: "preact@npm:10.26.9"
39084-
checksum: d5a9c521ca4ab35414bd9c7874e2ac4eaf0561875e2a5bb9f3c4c67e6e3d6971e122f763d19333f9b616a5f280b5d22cde526bb9c9fd9820bee15600a2f7269b
39085-
languageName: node
39086-
linkType: hard
39087-
3908839061
"preact@npm:^10.28.2":
3908939062
version: 10.28.4
3909039063
resolution: "preact@npm:10.28.4"

0 commit comments

Comments
 (0)