@@ -7,6 +7,7 @@ import { useFieldArray, useFormContext } from "react-hook-form";
77import { useForm } from "react-hook-form" ;
88import { z } from "zod" ;
99
10+ import NoSSR from "@calcom/lib/components/NoSSR" ;
1011import { locationsResolver } from "@calcom/lib/event-types/utils/locationsResolver" ;
1112import { useLocale } from "@calcom/lib/hooks/useLocale" ;
1213import type { LocationObject } from "@calcom/app-store/locations" ;
@@ -188,7 +189,7 @@ const EventTypeGroup = ({
188189 ) ;
189190} ;
190191
191- export const ConfigureStepCard : FC < ConfigureStepCardProps > = ( props ) => {
192+ const ConfigureStepCardContent : FC < ConfigureStepCardProps > = ( props ) => {
192193 const { loading, formPortalRef, handleSetUpLater } = props ;
193194 const { t } = useLocale ( ) ;
194195 const { control, watch } = useFormContext < TEventTypesForm > ( ) ;
@@ -221,60 +222,69 @@ export const ConfigureStepCard: FC<ConfigureStepCardProps> = (props) => {
221222 }
222223 } , [ submit , allUpdated , mainForSubmitRef ] ) ;
223224
224- return (
225- formPortalRef ?. current &&
226- createPortal (
227- < div className = "mt-8" >
228- { fields . map ( ( group , groupIndex ) => (
229- < div key = { group . fieldId } >
230- { eventTypeGroups [ groupIndex ] . eventTypes . some ( ( eventType ) => eventType . selected === true ) && (
231- < div className = "mb-2 mt-4 flex items-center" >
232- < Avatar
233- alt = ""
234- imageSrc = { group . image } // if no image, use default avatar
235- size = "md"
236- className = "inline-flex justify-center"
237- />
238- < p className = "text-subtle block pl-2" > { group . slug } </ p >
239- </ div >
240- ) }
241- < EventTypeGroup
242- groupIndex = { groupIndex }
243- setUpdatedEventTypesStatus = { setUpdatedEventTypesStatus }
244- submitRefs = { submitRefs }
245- { ...props }
246- />
247- </ div >
248- ) ) }
249- < button form = "outer-event-type-form" type = "submit" className = "hidden" ref = { mainForSubmitRef } >
250- Save
251- </ button >
225+ if ( ! formPortalRef ?. current ) {
226+ return null ;
227+ }
228+
229+ return createPortal (
230+ < div className = "mt-8" >
231+ { fields . map ( ( group , groupIndex ) => (
232+ < div key = { group . fieldId } >
233+ { eventTypeGroups [ groupIndex ] . eventTypes . some ( ( eventType ) => eventType . selected === true ) && (
234+ < div className = "mb-2 mt-4 flex items-center" >
235+ < Avatar
236+ alt = ""
237+ imageSrc = { group . image } // if no image, use default avatar
238+ size = "md"
239+ className = "inline-flex justify-center"
240+ />
241+ < p className = "text-subtle block pl-2" > { group . slug } </ p >
242+ </ div >
243+ ) }
244+ < EventTypeGroup
245+ groupIndex = { groupIndex }
246+ setUpdatedEventTypesStatus = { setUpdatedEventTypesStatus }
247+ submitRefs = { submitRefs }
248+ { ...props }
249+ />
250+ </ div >
251+ ) ) }
252+ < button form = "outer-event-type-form" type = "submit" className = "hidden" ref = { mainForSubmitRef } >
253+ Save
254+ </ button >
255+ < Button
256+ className = "text-md mt-6 w-full justify-center"
257+ type = "button"
258+ data-testid = "configure-step-save"
259+ onClick = { ( ) => {
260+ submitRefs . current . forEach ( ( ref ) => ref ?. click ( ) ) ;
261+ setSubmit ( true ) ;
262+ } }
263+ loading = { loading } >
264+ { t ( "save" ) }
265+ </ Button >
266+
267+ < div className = "flex w-full flex-row justify-center" >
252268 < Button
253- className = "text-md mt-6 w-full justify-center"
254- type = "button"
255- data-testid = "configure-step-save"
256- onClick = { ( ) => {
257- submitRefs . current . forEach ( ( ref ) => ref ?. click ( ) ) ;
258- setSubmit ( true ) ;
269+ color = "minimal"
270+ data-testid = "set-up-later"
271+ onClick = { ( event ) => {
272+ event . preventDefault ( ) ;
273+ handleSetUpLater ( ) ;
259274 } }
260- loading = { loading } >
261- { t ( "save " ) }
275+ className = "mt-8 cursor-pointer px-4 py-2 font-sans text-sm font-medium" >
276+ { t ( "set_up_later " ) }
262277 </ Button >
278+ </ div >
279+ </ div > ,
280+ formPortalRef . current
281+ ) ;
282+ } ;
263283
264- < div className = "flex w-full flex-row justify-center" >
265- < Button
266- color = "minimal"
267- data-testid = "set-up-later"
268- onClick = { ( event ) => {
269- event . preventDefault ( ) ;
270- handleSetUpLater ( ) ;
271- } }
272- className = "mt-8 cursor-pointer px-4 py-2 font-sans text-sm font-medium" >
273- { t ( "set_up_later" ) }
274- </ Button >
275- </ div >
276- </ div > ,
277- formPortalRef ?. current
278- )
284+ export const ConfigureStepCard : FC < ConfigureStepCardProps > = ( props ) => {
285+ return (
286+ < NoSSR >
287+ < ConfigureStepCardContent { ...props } />
288+ </ NoSSR >
279289 ) ;
280290} ;
0 commit comments