Skip to content

Commit 3c22594

Browse files
aatbipaatbip
authored
Merge pull request #11 from copilot-platforms/OUT-52
OUT-52 Fix display of multiSelect autofill fields
2 parents 230c458 + 68dd280 commit 3c22594

File tree

4 files changed

+134
-83
lines changed

4 files changed

+134
-83
lines changed

‎src/app/client-preview/page.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,11 @@ export default async function ClientPreviewPage({
8282
{settings?.bannerImage?.url && (
8383
<img
8484
className='w-full object-fill xl:object-cover'
85-
src={settings?.bannerImage?.url || '/images/default_banner.png'}
85+
src={
86+
!_settings
87+
? '/images/default_banner.png'
88+
: settings?.bannerImage.url
89+
}
8690
alt='banner image'
8791
style={{
8892
height: '25vh',

‎src/app/components/EditorInterface.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -78,15 +78,6 @@ const EditorInterface = ({ settings, token }: IEditorInterface) => {
7878
FloatingCommandExtension.configure({
7979
suggestion: floatingMenuSuggestion,
8080
}),
81-
Mention.configure({
82-
HTMLAttributes: {
83-
class: 'autofill-pill',
84-
},
85-
suggestion: autofillMenuSuggestion,
86-
renderLabel({ node }) {
87-
return `${node.attrs.label ?? node.attrs.id}`
88-
},
89-
}),
9081
Placeholder.configure({
9182
placeholder: ({ node }) => {
9283
const headingPlaceholders: any = {
@@ -124,6 +115,15 @@ const EditorInterface = ({ settings, token }: IEditorInterface) => {
124115
Table.configure({
125116
resizable: true,
126117
}),
118+
Mention.configure({
119+
HTMLAttributes: {
120+
class: 'autofill-pill',
121+
},
122+
suggestion: autofillMenuSuggestion,
123+
renderLabel({ node }) {
124+
return `${node.attrs.label ?? node.attrs.id}`
125+
},
126+
}),
127127
TableRow,
128128
TableCell,
129129
TableHeader.configure({
@@ -346,7 +346,7 @@ const EditorInterface = ({ settings, token }: IEditorInterface) => {
346346
right: 10,
347347
display: bannerImageHovered ? 'block' : 'none',
348348
cursor: 'pointer',
349-
color: '#000',
349+
color: '#fff',
350350
}}
351351
onClick={() => {
352352
appState?.setBannerImgId('')

‎src/app/components/Footer.tsx

Lines changed: 53 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client'
22

33
import { When } from '@/components/hoc/When'
4+
import { apiUrl } from '@/config'
45
import { useAppState } from '@/hooks/useAppState'
56
import { handleBannerImageUpload } from '@/utils/handleBannerImageUpload'
67
import { ImagePickerUtils } from '@/utils/imagePickerUtils'
@@ -9,12 +10,60 @@ import { useEffect } from 'react'
910
export const Footer = () => {
1011
const appState = useAppState()
1112

13+
const saveUtility = async (payload: any) => {
14+
try {
15+
await fetch(`/api/settings?token=${appState?.appState?.token}`, {
16+
method: 'PUT',
17+
body: JSON.stringify(payload),
18+
})
19+
const res = await fetch(
20+
`/api/settings?token=${appState?.appState?.token}`,
21+
)
22+
const { data } = await res.json()
23+
if (data) {
24+
appState?.setOriginalTemplate(data.content)
25+
appState?.setSettings(data)
26+
}
27+
appState?.setLoading(false)
28+
appState?.toggleChangesCreated(false)
29+
} catch (e) {
30+
console.error(e)
31+
appState?.setLoading(false)
32+
}
33+
}
34+
1235
const handleSave = async () => {
1336
appState?.setLoading(true)
1437
//get editor content
1538
const content = appState?.appState.editor?.getHTML()
1639

1740
let payload = {}
41+
42+
if (
43+
appState?.appState?.settings?.bannerImage?.url ===
44+
'/images/default_banner.png'
45+
) {
46+
const imagePickerUtils = new ImagePickerUtils()
47+
const imageResponse = await fetch(`/images/default_banner.png`)
48+
const imageBlob = await imageResponse.blob()
49+
const imageFile = await imagePickerUtils.blobToFile(
50+
imageBlob,
51+
'bannerImg',
52+
)
53+
const data = await handleBannerImageUpload(
54+
imageFile as File,
55+
appState?.appState.token as string,
56+
)
57+
payload = {
58+
backgroundColor: appState?.appState.editorColor,
59+
content: content,
60+
bannerImageId: data?.id,
61+
token: appState?.appState.token,
62+
}
63+
saveUtility(payload)
64+
return
65+
}
66+
1867
if (!appState?.appState.bannerImgUrl) {
1968
payload = {
2069
backgroundColor: appState?.appState?.editorColor,
@@ -29,28 +78,10 @@ export const Footer = () => {
2978
token: appState?.appState?.token,
3079
}),
3180
})
32-
try {
33-
await fetch(`/api/settings?token=${appState?.appState?.token}`, {
34-
method: 'PUT',
35-
body: JSON.stringify(payload),
36-
})
37-
const res = await fetch(
38-
`/api/settings?token=${appState?.appState?.token}`,
39-
)
40-
const { data } = await res.json()
41-
if (data) {
42-
appState?.setOriginalTemplate(data.content)
43-
appState?.setSettings(data)
44-
}
45-
appState?.setLoading(false)
46-
appState?.toggleChangesCreated(false)
47-
return
48-
} catch (e) {
49-
console.error(e)
50-
appState?.setLoading(false)
51-
return
52-
}
81+
saveUtility(payload)
82+
return
5383
}
84+
5485
if (
5586
appState?.appState.bannerImgUrl !==
5687
appState?.appState.settings?.bannerImage?.url
@@ -78,25 +109,7 @@ export const Footer = () => {
78109
token: appState?.appState.token,
79110
}
80111
}
81-
try {
82-
await fetch(`/api/settings?token=${appState?.appState?.token}`, {
83-
method: 'PUT',
84-
body: JSON.stringify(payload),
85-
})
86-
const res = await fetch(
87-
`/api/settings?token=${appState?.appState?.token}`,
88-
)
89-
const { data } = await res.json()
90-
if (data) {
91-
appState?.setOriginalTemplate(data.content)
92-
appState?.setSettings(data)
93-
}
94-
appState?.setLoading(false)
95-
appState?.toggleChangesCreated(false)
96-
} catch (e) {
97-
console.error(e)
98-
appState?.setLoading(false)
99-
}
112+
saveUtility(payload)
100113
}
101114

102115
const handleCancel = async () => {

‎src/components/autofillFields/AutofillFields.tsx

Lines changed: 66 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ const AutofillFields = () => {
1414
)
1515

1616
useEffect(() => {
17-
if (!appState?.appState.selectedClient && !appState?.appState.readOnly)
17+
if (!appState?.appState?.selectedClient && !appState?.appState?.readOnly)
1818
return
1919
appState?.setClientCompanyName('')
2020
;(async () => {
2121
appState?.setLoading(true)
2222
const res = await fetch(
23-
`/api/companies?companyId=${appState?.appState.selectedClient?.companyId}&token=${appState?.appState.token}`,
23+
`/api/companies?companyId=${appState?.appState.selectedClient?.companyId}&token=${appState?.appState?.token}`,
2424
)
2525
const { data } = await res.json()
2626
if (data.name) {
@@ -30,52 +30,50 @@ const AutofillFields = () => {
3030
}
3131
appState?.setLoading(false)
3232
})()
33-
}, [appState?.appState.selectedClient])
33+
}, [appState?.appState?.selectedClient])
3434

3535
return (
3636
<div className='p-5'>
3737
<p className='font-medium pb-5'>Autofill fields</p>
3838
<div className='flex flex-col gap-5'>
3939
{/* readonly mode */}
40-
<When condition={appState?.appState.readOnly as boolean}>
41-
<AutofillTextReadonlyMode
42-
label={`Given name: ${
43-
appState?.appState.selectedClient?.givenName as string
44-
}`}
40+
<When condition={appState?.appState?.readOnly as boolean}>
41+
<AutofillTextStaticField
42+
labelName={'Given name'}
43+
labelValues={
44+
appState?.appState?.selectedClient?.givenName as string
45+
}
4546
/>
46-
<AutofillTextReadonlyMode
47-
label={`Family name: ${
48-
appState?.appState.selectedClient?.familyName as string
49-
}`}
47+
<AutofillTextStaticField
48+
labelName={'Family name'}
49+
labelValues={
50+
appState?.appState?.selectedClient?.familyName as string
51+
}
5052
/>
51-
<AutofillTextReadonlyMode
52-
label={`Email: ${
53-
appState?.appState.selectedClient?.email as string
54-
}`}
53+
<AutofillTextStaticField
54+
labelName={'Email'}
55+
labelValues={appState?.appState?.selectedClient?.email as string}
5556
/>
56-
<AutofillTextReadonlyMode
57-
label={`Company: ${
58-
appState?.appState.selectedClientCompanyName
59-
? appState?.appState.selectedClientCompanyName
57+
<AutofillTextStaticField
58+
labelName={'Company'}
59+
labelValues={
60+
appState?.appState?.selectedClientCompanyName
61+
? appState?.appState?.selectedClientCompanyName
6062
: ''
61-
}`}
63+
}
6264
/>
63-
{/* <AutofillTextReadonlyMode */}
64-
{/* label={`Address: ${ */}
65-
{/* (appState?.appState.selectedClient?.address as string) || '' */}
66-
{/* }`} */}
67-
{/* /> */}
68-
{appState?.appState.selectedClient &&
65+
{appState?.appState?.selectedClient &&
6966
Object.keys(
70-
(appState?.appState.selectedClient as IClient)?.customFields,
67+
(appState?.appState?.selectedClient as IClient)?.customFields,
7168
).length > 0 &&
7269
Object.entries(
73-
(appState?.appState.selectedClient as IClient)?.customFields,
70+
(appState?.appState?.selectedClient as IClient)?.customFields,
7471
).map((value, key) => {
7572
return (
7673
<AutofillTextReadonlyMode
7774
key={key}
78-
label={`${value[0]}: ${value[1]}`}
75+
labelName={value[0]}
76+
labelValues={value[1]}
7977
/>
8078
)
8179
})}
@@ -135,8 +133,44 @@ const AutofillText = ({
135133
)
136134
}
137135

138-
const AutofillTextReadonlyMode = ({ label }: { label: string }) => {
139-
return <p className='text-new-gray hover:text-text cursor-pointer'>{label}</p>
136+
const AutofillTextStaticField = ({
137+
labelName,
138+
labelValues,
139+
}: {
140+
labelName: string
141+
labelValues: string
142+
}) => {
143+
return (
144+
<p className='text-new-gray hover:text-text cursor-pointer'>
145+
{labelName}: {labelValues}
146+
</p>
147+
)
148+
}
149+
150+
const AutofillTextReadonlyMode = ({
151+
labelName,
152+
labelValues,
153+
}: {
154+
labelName: string
155+
labelValues: string | string[]
156+
}) => {
157+
const appState = useAppState()
158+
const name = appState?.appState.customFields.find(
159+
(el) => el.key === labelName,
160+
)?.name
161+
if (Array.isArray(labelValues)) {
162+
return (
163+
<p className='text-new-gray hover:text-text cursor-pointer'>
164+
{name}: {labelValues.join(', ')}
165+
</p>
166+
)
167+
} else {
168+
return (
169+
<p className='text-new-gray hover:text-text cursor-pointer'>
170+
{name}: {labelValues}
171+
</p>
172+
)
173+
}
140174
}
141175

142176
/**

0 commit comments

Comments
 (0)