@oneblink/apps-react 8.14.0 → 9.0.0-beta.1

package/dist/components/calendar-bookings/CalendarBookingsForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarBookingsForm.js","sourceRoot":"","sources":["../../../src/components/calendar-bookings/CalendarBookingsForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { NylasScheduling } from '@nylas/react'\nimport { NylasSchedulerResponse, NylasEvent } from '@nylas/web-elements'\nimport { Collapse, Fade } from '@mui/material'\nimport {\n  schedulingService,\n  submissionService,\n  OneBlinkAppsError,\n} from '@oneblink/apps'\nimport clsx from 'clsx'\nimport { Receipt } from '../receipts'\nimport ErrorModal from './ErrorModal'\nimport OnLoading from '../renderer/OnLoading'\nimport CalendarBookingsContainer from './CalendarBookingsContainer'\nimport useCalendarBookings from './CalendarBookingsProvider'\n\nfunction NylasBookingForm({\n  submissionId,\n  name,\n  email,\n  configurationId,\n  sessionId,\n  onBookingConfirmed,\n  onDone,\n}: Awaited<\n  ReturnType<typeof schedulingService.createNylasNewBookingSession>\n> & {\n  submissionId: string\n  onDone: (\n    formSubmissionResult: submissionService.FormSubmissionResult,\n  ) => Promise<void>\n}) {\n  const { setBookingError, onTimeSlotConfirmed } = useCalendarBookings()\n\n  const [\n    {\n      formSubmissionResult,\n      isRunningPostSubmissionAction,\n      postSubmissionError,\n      isConfirmingBooking,\n      confirmingBookingError,\n    },\n    setPostSubmissionState,\n  ] = React.useState<{\n    formSubmissionResult: submissionService.FormSubmissionResult | null\n    isRunningPostSubmissionAction: boolean\n    postSubmissionError: OneBlinkAppsError | null\n    isConfirmingBooking: boolean\n    confirmingBookingError: OneBlinkAppsError | null\n  }>({\n    formSubmissionResult: null,\n    isRunningPostSubmissionAction: false,\n    postSubmissionError: null,\n    isConfirmingBooking: false,\n    confirmingBookingError: null,\n  })\n  const clearPostSubmissionError = React.useCallback(() => {\n    setPostSubmissionState((currentState) => ({\n      ...currentState,\n      postSubmissionError: null,\n    }))\n  }, [])\n  const clearConfirmingBookingError = React.useCallback(() => {\n    setPostSubmissionState((currentState) => ({\n      ...currentState,\n      confirmingBookingError: null,\n    }))\n  }, [])\n\n  const executePostSubmissionAction = React.useCallback(\n    async (formSubmissionResult: submissionService.FormSubmissionResult) => {\n      setPostSubmissionState((currentState) => ({\n        ...currentState,\n        formSubmissionResult,\n        isRunningPostSubmissionAction: true,\n        postSubmissionError: null,\n      }))\n\n      try {\n        await onDone({\n          ...formSubmissionResult,\n          scheduling: null,\n        })\n      } catch (error) {\n        console.warn('Error while running post submission action', error)\n        setPostSubmissionState((currentState) => ({\n          ...currentState,\n          formSubmissionResult,\n          isRunningPostSubmissionAction: false,\n          postSubmissionError: error as OneBlinkAppsError,\n        }))\n      }\n    },\n    [onDone],\n  )\n\n  const handleConfirmedBooking = React.useCallback(\n    async (schedulingBooking: schedulingService.SchedulingBooking) => {\n      setPostSubmissionState((currentState) => ({\n        ...currentState,\n        isConfirmingBooking: true,\n        confirmingBookingError: null,\n      }))\n\n      try {\n        const formSubmissionResult = await onBookingConfirmed(schedulingBooking)\n        setPostSubmissionState((currentState) => ({\n          ...currentState,\n          formSubmissionResult,\n        }))\n        if (formSubmissionResult.payment) {\n          setTimeout(async () => {\n            executePostSubmissionAction(formSubmissionResult)\n          }, 2000)\n        } else {\n          setPostSubmissionState((currentState) => ({\n            ...currentState,\n            isConfirmingBooking: false,\n            formSubmissionResult,\n          }))\n        }\n      } catch (error) {\n        console.warn('Error while handling confirmed booking', error)\n        setPostSubmissionState((currentState) => ({\n          ...currentState,\n          isConfirmingBooking: false,\n          confirmingBookingError: error as OneBlinkAppsError,\n        }))\n      }\n    },\n    [onBookingConfirmed, executePostSubmissionAction],\n  )\n\n  return (\n    <>\n      <Collapse in={isConfirmingBooking}>\n        <div className=\"has-margin-top-1\">\n          <div className=\"cypress-loading has-text-centered\">\n            <OnLoading className=\"has-text-centered\" />\n            <Fade in={!!formSubmissionResult?.payment}>\n              <span>Redirecting to payment</span>\n            </Fade>\n          </div>\n        </div>\n      </Collapse>\n\n      <div className=\"ob-scheduling-booking-form\">\n        {!formSubmissionResult?.payment && (\n          <NylasScheduling\n            eventOverrides={{\n              timeslotConfirmed: onTimeSlotConfirmed,\n              async bookedEventInfo(\n                event: CustomEvent<\n                  NylasSchedulerResponse<\n                    NylasEvent & {\n                      event_id: string\n                      additional_guests: Array<{\n                        name: string\n                        email: string\n                      }>\n                      guest: {\n                        name: string\n                        email: string\n                      }\n                      additional_fields: Record<string, unknown>\n                      start_time: number\n                      end_time: number\n                      email_language: string\n                      timezone: string\n                      location?: string\n                    }\n                  >\n                >,\n              ) {\n                console.log('bookedEventInfo event', event)\n\n                event.preventDefault()\n\n                if ('error' in event.detail) {\n                  setBookingError(\n                    event.detail.error?.message ?? 'Calendar Booking Error',\n                  )\n                } else if ('data' in event.detail) {\n                  await handleConfirmedBooking({\n                    submissionId,\n                    startTime: new Date(event.detail.data.start_time * 1000),\n                    endTime: new Date(event.detail.data.end_time * 1000),\n                    location: event.detail.data.location,\n                    isReschedule: false,\n                  })\n                }\n              },\n            }}\n            bookingInfo={{\n              primaryParticipant: {\n                name: name ?? '',\n                email: email ?? '',\n              },\n              additionalFields: {\n                submissionId: {\n                  value: submissionId,\n                  type: 'text',\n                },\n              },\n            }}\n            enableUserFeedback={false}\n            configurationId={configurationId}\n            sessionId={sessionId}\n            nylasBranding={false}\n          />\n        )}\n\n        {formSubmissionResult && !formSubmissionResult.payment && (\n          <Receipt\n            className=\"ob-scheduling-receipt\"\n            containerClassName=\"ob-scheduling-receipt__container\"\n          >\n            <div className=\"buttons\">\n              <button\n                type=\"button\"\n                className={clsx(\n                  'is-primary button ob-button ob-scheduling-receipt__button ob-scheduling-receipt__okay-button cypress-scheduling-receipt-okay-button',\n                  { 'is-loading': isRunningPostSubmissionAction },\n                )}\n                disabled={isRunningPostSubmissionAction}\n                onClick={() =>\n                  executePostSubmissionAction(formSubmissionResult)\n                }\n              >\n                Done\n              </button>\n            </div>\n          </Receipt>\n        )}\n\n        <ErrorModal\n          error={postSubmissionError}\n          onClose={clearPostSubmissionError}\n        />\n\n        <ErrorModal\n          error={confirmingBookingError}\n          onClose={clearConfirmingBookingError}\n        />\n      </div>\n    </>\n  )\n}\n\nfunction CalendarBookingsForm({\n  onDone,\n}: {\n  onDone: (\n    formSubmissionResult: submissionService.FormSubmissionResult,\n  ) => Promise<void>\n}) {\n  return (\n    <CalendarBookingsContainer\n      fetchConfiguration={schedulingService.createNylasNewBookingSession}\n    >\n      {(props) => <NylasBookingForm {...props} onDone={onDone} />}\n    </CalendarBookingsContainer>\n  )\n}\n\nexport default React.memo(CalendarBookingsForm)\n"]}
+{"version":3,"file":"CalendarBookingsForm.js","sourceRoot":"","sources":["../../../src/components/calendar-bookings/CalendarBookingsForm.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EACL,iBAAiB,GAGlB,MAAM,gBAAgB,CAAA;AACvB,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,SAAS,MAAM,uBAAuB,CAAA;AAC7C,OAAO,yBAAyB,MAAM,6BAA6B,CAAA;AACnE,OAAO,mBAAmB,MAAM,4BAA4B,CAAA;AAE5D,SAAS,gBAAgB,CAAC,EACxB,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,eAAe,EACf,SAAS,EACT,kBAAkB,EAClB,MAAM,GAQP;IACC,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAEtE,MAAM,CACJ,EACE,oBAAoB,EACpB,6BAA6B,EAC7B,mBAAmB,EACnB,mBAAmB,EACnB,sBAAsB,GACvB,EACD,sBAAsB,EACvB,GAAG,KAAK,CAAC,QAAQ,CAMf;QACD,oBAAoB,EAAE,IAAI;QAC1B,6BAA6B,EAAE,KAAK;QACpC,mBAAmB,EAAE,IAAI;QACzB,mBAAmB,EAAE,KAAK;QAC1B,sBAAsB,EAAE,IAAI;KAC7B,CAAC,CAAA;IACF,MAAM,wBAAwB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtD,sBAAsB,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YACxC,GAAG,YAAY;YACf,mBAAmB,EAAE,IAAI;SAC1B,CAAC,CAAC,CAAA;IACL,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,MAAM,2BAA2B,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzD,sBAAsB,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YACxC,GAAG,YAAY;YACf,sBAAsB,EAAE,IAAI;SAC7B,CAAC,CAAC,CAAA;IACL,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,2BAA2B,GAAG,KAAK,CAAC,WAAW,CACnD,KAAK,EAAE,oBAA4D,EAAE,EAAE;QACrE,sBAAsB,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YACxC,GAAG,YAAY;YACf,oBAAoB;YACpB,6BAA6B,EAAE,IAAI;YACnC,mBAAmB,EAAE,IAAI;SAC1B,CAAC,CAAC,CAAA;QAEH,IAAI,CAAC;YACH,MAAM,MAAM,CAAC;gBACX,GAAG,oBAAoB;gBACvB,UAAU,EAAE,IAAI;aACjB,CAAC,CAAA;QACJ,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CAAC,4CAA4C,EAAE,KAAK,CAAC,CAAA;YACjE,sBAAsB,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;gBACxC,GAAG,YAAY;gBACf,oBAAoB;gBACpB,6BAA6B,EAAE,KAAK;gBACpC,mBAAmB,EAAE,KAA0B;aAChD,CAAC,CAAC,CAAA;QACL,CAAC;IACH,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAA;IAED,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAC9C,KAAK,EAAE,iBAAsD,EAAE,EAAE;QAC/D,sBAAsB,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YACxC,GAAG,YAAY;YACf,mBAAmB,EAAE,IAAI;YACzB,sBAAsB,EAAE,IAAI;SAC7B,CAAC,CAAC,CAAA;QAEH,IAAI,CAAC;YACH,MAAM,oBAAoB,GAAG,MAAM,kBAAkB,CAAC,iBAAiB,CAAC,CAAA;YACxE,sBAAsB,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;gBACxC,GAAG,YAAY;gBACf,oBAAoB;aACrB,CAAC,CAAC,CAAA;YACH,IAAI,oBAAoB,CAAC,OAAO,EAAE,CAAC;gBACjC,UAAU,CAAC,KAAK,IAAI,EAAE;oBACpB,2BAA2B,CAAC,oBAAoB,CAAC,CAAA;gBACnD,CAAC,EAAE,IAAI,CAAC,CAAA;YACV,CAAC;iBAAM,CAAC;gBACN,sBAAsB,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;oBACxC,GAAG,YAAY;oBACf,mBAAmB,EAAE,KAAK;oBAC1B,oBAAoB;iBACrB,CAAC,CAAC,CAAA;YACL,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CAAC,wCAAwC,EAAE,KAAK,CAAC,CAAA;YAC7D,sBAAsB,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;gBACxC,GAAG,YAAY;gBACf,mBAAmB,EAAE,KAAK;gBAC1B,sBAAsB,EAAE,KAA0B;aACnD,CAAC,CAAC,CAAA;QACL,CAAC;IACH,CAAC,EACD,CAAC,kBAAkB,EAAE,2BAA2B,CAAC,CAClD,CAAA;IAED,OAAO,CACL,8BACE,KAAC,QAAQ,IAAC,EAAE,EAAE,mBAAmB,YAC/B,cAAK,SAAS,EAAC,kBAAkB,YAC/B,eAAK,SAAS,EAAC,mCAAmC,aAChD,KAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,GAAG,EAC3C,KAAC,IAAI,IAAC,EAAE,EAAE,CAAC,CAAC,CAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,OAAO,CAAA,YACvC,oDAAmC,GAC9B,IACH,GACF,GACG,EAEX,eAAK,SAAS,EAAC,4BAA4B,aACxC,CAAC,CAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,OAAO,CAAA,IAAI,CACjC,KAAC,eAAe,IACd,cAAc,EAAE;4BACd,iBAAiB,EAAE,mBAAmB;4BACtC,KAAK,CAAC,eAAe,CACnB,KAoBC;;gCAED,OAAO,CAAC,GAAG,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAA;gCAE3C,KAAK,CAAC,cAAc,EAAE,CAAA;gCAEtB,IAAI,OAAO,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;oCAC5B,eAAe,CACb,MAAA,MAAA,KAAK,CAAC,MAAM,CAAC,KAAK,0CAAE,OAAO,mCAAI,wBAAwB,CACxD,CAAA;gCACH,CAAC;qCAAM,IAAI,MAAM,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;oCAClC,MAAM,sBAAsB,CAAC;wCAC3B,YAAY;wCACZ,SAAS,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;wCACxD,OAAO,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;wCACpD,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ;wCACpC,YAAY,EAAE,KAAK;qCACpB,CAAC,CAAA;gCACJ,CAAC;4BACH,CAAC;yBACF,EACD,WAAW,EAAE;4BACX,kBAAkB,EAAE;gCAClB,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE;gCAChB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE;6BACnB;4BACD,gBAAgB,EAAE;gCAChB,YAAY,EAAE;oCACZ,KAAK,EAAE,YAAY;oCACnB,IAAI,EAAE,MAAM;iCACb;6BACF;yBACF,EACD,kBAAkB,EAAE,KAAK,EACzB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,KAAK,GACpB,CACH,EAEA,oBAAoB,IAAI,CAAC,oBAAoB,CAAC,OAAO,IAAI,CACxD,KAAC,OAAO,IACN,SAAS,EAAC,uBAAuB,EACjC,kBAAkB,EAAC,kCAAkC,YAErD,cAAK,SAAS,EAAC,SAAS,YACtB,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CACb,qIAAqI,EACrI,EAAE,YAAY,EAAE,6BAA6B,EAAE,CAChD,EACD,QAAQ,EAAE,6BAA6B,EACvC,OAAO,EAAE,GAAG,EAAE,CACZ,2BAA2B,CAAC,oBAAoB,CAAC,qBAI5C,GACL,GACE,CACX,EAED,KAAC,UAAU,IACT,KAAK,EAAE,mBAAmB,EAC1B,OAAO,EAAE,wBAAwB,GACjC,EAEF,KAAC,UAAU,IACT,KAAK,EAAE,sBAAsB,EAC7B,OAAO,EAAE,2BAA2B,GACpC,IACE,IACL,CACJ,CAAA;AACH,CAAC;AAED,SAAS,oBAAoB,CAAC,EAC5B,MAAM,GAKP;IACC,OAAO,CACL,KAAC,yBAAyB,IACxB,kBAAkB,EAAE,iBAAiB,CAAC,4BAA4B,YAEjE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,gBAAgB,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,GACjC,CAC7B,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { NylasScheduling } from '@nylas/react'\nimport { NylasSchedulerResponse, NylasEvent } from '@nylas/web-elements'\nimport { Collapse, Fade } from '@mui/material'\nimport {\n  schedulingService,\n  submissionService,\n  OneBlinkAppsError,\n} from '@oneblink/apps'\nimport clsx from 'clsx'\nimport { Receipt } from '../receipts'\nimport ErrorModal from './ErrorModal'\nimport OnLoading from '../renderer/OnLoading'\nimport CalendarBookingsContainer from './CalendarBookingsContainer'\nimport useCalendarBookings from './CalendarBookingsProvider'\n\nfunction NylasBookingForm({\n  submissionId,\n  name,\n  email,\n  configurationId,\n  sessionId,\n  onBookingConfirmed,\n  onDone,\n}: Awaited<\n  ReturnType<typeof schedulingService.createNylasNewBookingSession>\n> & {\n  submissionId: string\n  onDone: (\n    formSubmissionResult: submissionService.FormSubmissionResult,\n  ) => Promise<void>\n}) {\n  const { setBookingError, onTimeSlotConfirmed } = useCalendarBookings()\n\n  const [\n    {\n      formSubmissionResult,\n      isRunningPostSubmissionAction,\n      postSubmissionError,\n      isConfirmingBooking,\n      confirmingBookingError,\n    },\n    setPostSubmissionState,\n  ] = React.useState<{\n    formSubmissionResult: submissionService.FormSubmissionResult | null\n    isRunningPostSubmissionAction: boolean\n    postSubmissionError: OneBlinkAppsError | null\n    isConfirmingBooking: boolean\n    confirmingBookingError: OneBlinkAppsError | null\n  }>({\n    formSubmissionResult: null,\n    isRunningPostSubmissionAction: false,\n    postSubmissionError: null,\n    isConfirmingBooking: false,\n    confirmingBookingError: null,\n  })\n  const clearPostSubmissionError = React.useCallback(() => {\n    setPostSubmissionState((currentState) => ({\n      ...currentState,\n      postSubmissionError: null,\n    }))\n  }, [])\n  const clearConfirmingBookingError = React.useCallback(() => {\n    setPostSubmissionState((currentState) => ({\n      ...currentState,\n      confirmingBookingError: null,\n    }))\n  }, [])\n\n  const executePostSubmissionAction = React.useCallback(\n    async (formSubmissionResult: submissionService.FormSubmissionResult) => {\n      setPostSubmissionState((currentState) => ({\n        ...currentState,\n        formSubmissionResult,\n        isRunningPostSubmissionAction: true,\n        postSubmissionError: null,\n      }))\n\n      try {\n        await onDone({\n          ...formSubmissionResult,\n          scheduling: null,\n        })\n      } catch (error) {\n        console.warn('Error while running post submission action', error)\n        setPostSubmissionState((currentState) => ({\n          ...currentState,\n          formSubmissionResult,\n          isRunningPostSubmissionAction: false,\n          postSubmissionError: error as OneBlinkAppsError,\n        }))\n      }\n    },\n    [onDone],\n  )\n\n  const handleConfirmedBooking = React.useCallback(\n    async (schedulingBooking: schedulingService.SchedulingBooking) => {\n      setPostSubmissionState((currentState) => ({\n        ...currentState,\n        isConfirmingBooking: true,\n        confirmingBookingError: null,\n      }))\n\n      try {\n        const formSubmissionResult = await onBookingConfirmed(schedulingBooking)\n        setPostSubmissionState((currentState) => ({\n          ...currentState,\n          formSubmissionResult,\n        }))\n        if (formSubmissionResult.payment) {\n          setTimeout(async () => {\n            executePostSubmissionAction(formSubmissionResult)\n          }, 2000)\n        } else {\n          setPostSubmissionState((currentState) => ({\n            ...currentState,\n            isConfirmingBooking: false,\n            formSubmissionResult,\n          }))\n        }\n      } catch (error) {\n        console.warn('Error while handling confirmed booking', error)\n        setPostSubmissionState((currentState) => ({\n          ...currentState,\n          isConfirmingBooking: false,\n          confirmingBookingError: error as OneBlinkAppsError,\n        }))\n      }\n    },\n    [onBookingConfirmed, executePostSubmissionAction],\n  )\n\n  return (\n    <>\n      <Collapse in={isConfirmingBooking}>\n        <div className=\"has-margin-top-1\">\n          <div className=\"cypress-loading has-text-centered\">\n            <OnLoading className=\"has-text-centered\" />\n            <Fade in={!!formSubmissionResult?.payment}>\n              <span>Redirecting to payment</span>\n            </Fade>\n          </div>\n        </div>\n      </Collapse>\n\n      <div className=\"ob-scheduling-booking-form\">\n        {!formSubmissionResult?.payment && (\n          <NylasScheduling\n            eventOverrides={{\n              timeslotConfirmed: onTimeSlotConfirmed,\n              async bookedEventInfo(\n                event: CustomEvent<\n                  NylasSchedulerResponse<\n                    NylasEvent & {\n                      event_id: string\n                      additional_guests: Array<{\n                        name: string\n                        email: string\n                      }>\n                      guest: {\n                        name: string\n                        email: string\n                      }\n                      additional_fields: Record<string, unknown>\n                      start_time: number\n                      end_time: number\n                      email_language: string\n                      timezone: string\n                      location?: string\n                    }\n                  >\n                >,\n              ) {\n                console.log('bookedEventInfo event', event)\n\n                event.preventDefault()\n\n                if ('error' in event.detail) {\n                  setBookingError(\n                    event.detail.error?.message ?? 'Calendar Booking Error',\n                  )\n                } else if ('data' in event.detail) {\n                  await handleConfirmedBooking({\n                    submissionId,\n                    startTime: new Date(event.detail.data.start_time * 1000),\n                    endTime: new Date(event.detail.data.end_time * 1000),\n                    location: event.detail.data.location,\n                    isReschedule: false,\n                  })\n                }\n              },\n            }}\n            bookingInfo={{\n              primaryParticipant: {\n                name: name ?? '',\n                email: email ?? '',\n              },\n              additionalFields: {\n                submissionId: {\n                  value: submissionId,\n                  type: 'text',\n                },\n              },\n            }}\n            enableUserFeedback={false}\n            configurationId={configurationId}\n            sessionId={sessionId}\n            nylasBranding={false}\n          />\n        )}\n\n        {formSubmissionResult && !formSubmissionResult.payment && (\n          <Receipt\n            className=\"ob-scheduling-receipt\"\n            containerClassName=\"ob-scheduling-receipt__container\"\n          >\n            <div className=\"buttons\">\n              <button\n                type=\"button\"\n                className={clsx(\n                  'is-primary button ob-button ob-scheduling-receipt__button ob-scheduling-receipt__okay-button cypress-scheduling-receipt-okay-button',\n                  { 'is-loading': isRunningPostSubmissionAction },\n                )}\n                disabled={isRunningPostSubmissionAction}\n                onClick={() =>\n                  executePostSubmissionAction(formSubmissionResult)\n                }\n              >\n                Done\n              </button>\n            </div>\n          </Receipt>\n        )}\n\n        <ErrorModal\n          error={postSubmissionError}\n          onClose={clearPostSubmissionError}\n        />\n\n        <ErrorModal\n          error={confirmingBookingError}\n          onClose={clearConfirmingBookingError}\n        />\n      </div>\n    </>\n  )\n}\n\nfunction CalendarBookingsForm({\n  onDone,\n}: {\n  onDone: (\n    formSubmissionResult: submissionService.FormSubmissionResult,\n  ) => Promise<void>\n}) {\n  return (\n    <CalendarBookingsContainer\n      fetchConfiguration={schedulingService.createNylasNewBookingSession}\n    >\n      {(props) => <NylasBookingForm {...props} onDone={onDone} />}\n    </CalendarBookingsContainer>\n  )\n}\n\nexport default React.memo(CalendarBookingsForm)\n"]}

package/dist/components/calendar-bookings/CalendarBookingsProvider.d.ts

@@ -8,6 +8,6 @@ type CalendarBookingsContextProps = {
 export declare function CalendarBookingsProvider({ children, refreshNylasState, }: {
     children: React.ReactNode;
     refreshNylasState: () => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export default function useCalendarBookings(): CalendarBookingsContextProps;
 export {};

package/dist/components/calendar-bookings/CalendarBookingsProvider.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext, createContext, useMemo, useCallback, } from 'react';
 import { Snackbar, Alert, Button, useTheme } from '@mui/material';
 import Color from 'color';
@@ -51,12 +52,7 @@ export function CalendarBookingsProvider({ children, refreshNylasState, }) {
         onTimeSlotConfirmed,
         themeConfig,
     }), [setBookingError, onTimeSlotConfirmed, themeConfig]);
-    return (React.createElement(CalendarBookingsContext.Provider, { value: value },
-        React.createElement(React.Fragment, null,
-            children,
-            React.createElement(Snackbar, { anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, open: isShowingErrorSnack },
-                React.createElement(Alert, { onClose: hideErrorSnack, severity: 'error', elevation: 6, variant: "filled", action: React.createElement(Button, { color: "inherit", variant: "text", size: "small", onClick: refreshNylasState },
-                        React.createElement("b", null, "Start Again")) }, bookingError)))));
+    return (_jsx(CalendarBookingsContext.Provider, { value: value, children: _jsxs(_Fragment, { children: [children, _jsx(Snackbar, { anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, open: isShowingErrorSnack, children: _jsx(Alert, { onClose: hideErrorSnack, severity: 'error', elevation: 6, variant: "filled", action: _jsx(Button, { color: "inherit", variant: "text", size: "small", onClick: refreshNylasState, children: _jsx("b", { children: "Start Again" }) }), children: bookingError }) })] }) }));
 }
 export default function useCalendarBookings() {
     return useContext(CalendarBookingsContext);

package/dist/components/calendar-bookings/CalendarBookingsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarBookingsProvider.js","sourceRoot":"","sources":["../../../src/components/calendar-bookings/CalendarBookingsProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  useContext,\n  createContext,\n  useMemo,\n  useCallback,\n  ComponentProps,\n} from 'react'\nimport { NylasScheduling } from '@nylas/react'\nimport { Snackbar, Alert, Button, useTheme } from '@mui/material'\nimport Color from 'color'\nimport useBooleanState from '../../hooks/useBooleanState'\n\ntype CalendarBookingsContextProps = {\n  setBookingError: (errorString: string) => void\n  onTimeSlotConfirmed: () => Promise<void>\n  themeConfig: ComponentProps<typeof NylasScheduling>['themeConfig']\n}\n\nconst CalendarBookingsContext = createContext<CalendarBookingsContextProps>({\n  setBookingError: () => {},\n  onTimeSlotConfirmed: async () => {},\n  themeConfig: {},\n})\n\nexport function CalendarBookingsProvider({\n  children,\n  refreshNylasState,\n}: {\n  children: React.ReactNode\n  refreshNylasState: () => void\n}) {\n  const [isShowingErrorSnack, showErrorSnack, hideErrorSnack] =\n    useBooleanState(false)\n  const [bookingError, _setBookingError] = React.useState<string>()\n\n  const setBookingError = useCallback(\n    (errorString: string) => {\n      _setBookingError(errorString)\n      showErrorSnack()\n    },\n    [showErrorSnack],\n  )\n\n  /**\n   * The alternative here is to set the submissionId field to multi-line-text\n   * input then use the below css It works because the booking form only has 1\n   * multi-line-text input Unfortunately chrome won't allow :nth-child selectors\n   * on part() selectors ::part(nbf__textarea-component) { display: none; }\n   */\n  const onTimeSlotConfirmed = React.useCallback(async () => {\n    setTimeout(() => {\n      const submissionIdInputComponent = document\n        .querySelector('nylas-scheduling')\n        ?.shadowRoot?.querySelector('nylas-booking-form')\n        ?.shadowRoot?.querySelector('#submissionId') as HTMLElement | undefined\n\n      if (submissionIdInputComponent) {\n        submissionIdInputComponent.style.display = 'none'\n      }\n    }, 50)\n  }, [])\n\n  const theme = useTheme()\n\n  const colorIsLight = useMemo(\n    () => Color(theme.palette.primary.main).isLight(),\n    [theme.palette.primary.main],\n  )\n\n  const themeConfig = useMemo(() => {\n    const nylasTheme: ComponentProps<typeof NylasScheduling>['themeConfig'] = {\n      '--nylas-info': theme.palette.info.main,\n      '--nylas-success': theme.palette.success.main,\n      '--nylas-warning': theme.palette.warning.main,\n      '--nylas-error': theme.palette.error.main,\n      '--nylas-font-family': theme.typography.fontFamily,\n      '--nylas-font-size': theme.typography.fontSize.toString(),\n    }\n\n    if (!colorIsLight) {\n      nylasTheme['--nylas-primary'] = theme.palette.primary.main\n    }\n    return nylasTheme\n  }, [theme.palette, colorIsLight, theme.typography])\n\n  const value = useMemo(\n    () => ({\n      setBookingError,\n      onTimeSlotConfirmed,\n      themeConfig,\n    }),\n    [setBookingError, onTimeSlotConfirmed, themeConfig],\n  )\n\n  return (\n    <CalendarBookingsContext.Provider value={value}>\n      <>\n        {children}\n        <Snackbar\n          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n          open={isShowingErrorSnack}\n        >\n          <Alert\n            onClose={hideErrorSnack}\n            severity={'error'}\n            elevation={6}\n            variant=\"filled\"\n            action={\n              <Button\n                color=\"inherit\"\n                variant=\"text\"\n                size=\"small\"\n                onClick={refreshNylasState}\n              >\n                <b>Start Again</b>\n              </Button>\n            }\n          >\n            {bookingError}\n          </Alert>\n        </Snackbar>\n      </>\n    </CalendarBookingsContext.Provider>\n  )\n}\n\nexport default function useCalendarBookings() {\n  return useContext(CalendarBookingsContext)\n}\n"]}
+{"version":3,"file":"CalendarBookingsProvider.js","sourceRoot":"","sources":["../../../src/components/calendar-bookings/CalendarBookingsProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EACZ,UAAU,EACV,aAAa,EACb,OAAO,EACP,WAAW,GAEZ,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,eAAe,MAAM,6BAA6B,CAAA;AAQzD,MAAM,uBAAuB,GAAG,aAAa,CAA+B;IAC1E,eAAe,EAAE,GAAG,EAAE,GAAE,CAAC;IACzB,mBAAmB,EAAE,KAAK,IAAI,EAAE,GAAE,CAAC;IACnC,WAAW,EAAE,EAAE;CAChB,CAAC,CAAA;AAEF,MAAM,UAAU,wBAAwB,CAAC,EACvC,QAAQ,EACR,iBAAiB,GAIlB;IACC,MAAM,CAAC,mBAAmB,EAAE,cAAc,EAAE,cAAc,CAAC,GACzD,eAAe,CAAC,KAAK,CAAC,CAAA;IACxB,MAAM,CAAC,YAAY,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAU,CAAA;IAEjE,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,WAAmB,EAAE,EAAE;QACtB,gBAAgB,CAAC,WAAW,CAAC,CAAA;QAC7B,cAAc,EAAE,CAAA;IAClB,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAA;IAED;;;;;OAKG;IACH,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QACvD,UAAU,CAAC,GAAG,EAAE;;YACd,MAAM,0BAA0B,GAAG,MAAA,MAAA,MAAA,MAAA,QAAQ;iBACxC,aAAa,CAAC,kBAAkB,CAAC,0CAChC,UAAU,0CAAE,aAAa,CAAC,oBAAoB,CAAC,0CAC/C,UAAU,0CAAE,aAAa,CAAC,eAAe,CAA4B,CAAA;YAEzE,IAAI,0BAA0B,EAAE,CAAC;gBAC/B,0BAA0B,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;YACnD,CAAC;QACH,CAAC,EAAE,EAAE,CAAC,CAAA;IACR,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EACjD,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAC7B,CAAA;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,MAAM,UAAU,GAA0D;YACxE,cAAc,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;YACvC,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;YAC7C,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;YAC7C,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI;YACzC,qBAAqB,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU;YAClD,mBAAmB,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,EAAE;SAC1D,CAAA;QAED,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,UAAU,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAA;QAC5D,CAAC;QACD,OAAO,UAAU,CAAA;IACnB,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAA;IAEnD,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,eAAe;QACf,mBAAmB;QACnB,WAAW;KACZ,CAAC,EACF,CAAC,eAAe,EAAE,mBAAmB,EAAE,WAAW,CAAC,CACpD,CAAA;IAED,OAAO,CACL,KAAC,uBAAuB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAC5C,8BACG,QAAQ,EACT,KAAC,QAAQ,IACP,YAAY,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,EACzD,IAAI,EAAE,mBAAmB,YAEzB,KAAC,KAAK,IACJ,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,CAAC,EACZ,OAAO,EAAC,QAAQ,EAChB,MAAM,EACJ,KAAC,MAAM,IACL,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,iBAAiB,YAE1B,sCAAkB,GACX,YAGV,YAAY,GACP,GACC,IACV,GAC8B,CACpC,CAAA;AACH,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB;IACzC,OAAO,UAAU,CAAC,uBAAuB,CAAC,CAAA;AAC5C,CAAC","sourcesContent":["import React, {\n  useContext,\n  createContext,\n  useMemo,\n  useCallback,\n  ComponentProps,\n} from 'react'\nimport { NylasScheduling } from '@nylas/react'\nimport { Snackbar, Alert, Button, useTheme } from '@mui/material'\nimport Color from 'color'\nimport useBooleanState from '../../hooks/useBooleanState'\n\ntype CalendarBookingsContextProps = {\n  setBookingError: (errorString: string) => void\n  onTimeSlotConfirmed: () => Promise<void>\n  themeConfig: ComponentProps<typeof NylasScheduling>['themeConfig']\n}\n\nconst CalendarBookingsContext = createContext<CalendarBookingsContextProps>({\n  setBookingError: () => {},\n  onTimeSlotConfirmed: async () => {},\n  themeConfig: {},\n})\n\nexport function CalendarBookingsProvider({\n  children,\n  refreshNylasState,\n}: {\n  children: React.ReactNode\n  refreshNylasState: () => void\n}) {\n  const [isShowingErrorSnack, showErrorSnack, hideErrorSnack] =\n    useBooleanState(false)\n  const [bookingError, _setBookingError] = React.useState<string>()\n\n  const setBookingError = useCallback(\n    (errorString: string) => {\n      _setBookingError(errorString)\n      showErrorSnack()\n    },\n    [showErrorSnack],\n  )\n\n  /**\n   * The alternative here is to set the submissionId field to multi-line-text\n   * input then use the below css It works because the booking form only has 1\n   * multi-line-text input Unfortunately chrome won't allow :nth-child selectors\n   * on part() selectors ::part(nbf__textarea-component) { display: none; }\n   */\n  const onTimeSlotConfirmed = React.useCallback(async () => {\n    setTimeout(() => {\n      const submissionIdInputComponent = document\n        .querySelector('nylas-scheduling')\n        ?.shadowRoot?.querySelector('nylas-booking-form')\n        ?.shadowRoot?.querySelector('#submissionId') as HTMLElement | undefined\n\n      if (submissionIdInputComponent) {\n        submissionIdInputComponent.style.display = 'none'\n      }\n    }, 50)\n  }, [])\n\n  const theme = useTheme()\n\n  const colorIsLight = useMemo(\n    () => Color(theme.palette.primary.main).isLight(),\n    [theme.palette.primary.main],\n  )\n\n  const themeConfig = useMemo(() => {\n    const nylasTheme: ComponentProps<typeof NylasScheduling>['themeConfig'] = {\n      '--nylas-info': theme.palette.info.main,\n      '--nylas-success': theme.palette.success.main,\n      '--nylas-warning': theme.palette.warning.main,\n      '--nylas-error': theme.palette.error.main,\n      '--nylas-font-family': theme.typography.fontFamily,\n      '--nylas-font-size': theme.typography.fontSize.toString(),\n    }\n\n    if (!colorIsLight) {\n      nylasTheme['--nylas-primary'] = theme.palette.primary.main\n    }\n    return nylasTheme\n  }, [theme.palette, colorIsLight, theme.typography])\n\n  const value = useMemo(\n    () => ({\n      setBookingError,\n      onTimeSlotConfirmed,\n      themeConfig,\n    }),\n    [setBookingError, onTimeSlotConfirmed, themeConfig],\n  )\n\n  return (\n    <CalendarBookingsContext.Provider value={value}>\n      <>\n        {children}\n        <Snackbar\n          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n          open={isShowingErrorSnack}\n        >\n          <Alert\n            onClose={hideErrorSnack}\n            severity={'error'}\n            elevation={6}\n            variant=\"filled\"\n            action={\n              <Button\n                color=\"inherit\"\n                variant=\"text\"\n                size=\"small\"\n                onClick={refreshNylasState}\n              >\n                <b>Start Again</b>\n              </Button>\n            }\n          >\n            {bookingError}\n          </Alert>\n        </Snackbar>\n      </>\n    </CalendarBookingsContext.Provider>\n  )\n}\n\nexport default function useCalendarBookings() {\n  return useContext(CalendarBookingsContext)\n}\n"]}

package/dist/components/calendar-bookings/CalendarBookingsReschedulingForm.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-declare function ReschedulingForm(): React.JSX.Element;
+declare function ReschedulingForm(): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ReschedulingForm>;
 export default _default;

package/dist/components/calendar-bookings/CalendarBookingsReschedulingForm.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { NylasScheduling } from '@nylas/react';
 import { schedulingService } from '@oneblink/apps';
@@ -7,11 +8,9 @@ import useCalendarBookings from './CalendarBookingsProvider';
 function NylasReschedulingForm({ submissionId, name, email, sessionId, bookingRef, }) {
     const { setBookingError, onTimeSlotConfirmed, themeConfig } = useCalendarBookings();
     if (!bookingRef) {
-        return (React.createElement(ErrorMessage, { title: "Error Retrieving Data", gutterTop: true },
-            React.createElement("span", { className: "cypress-booking-ref-not-found-error-message" }, "Could not find a calendar booking to reschedule")));
+        return (_jsx(ErrorMessage, { title: "Error Retrieving Data", gutterTop: true, children: _jsx("span", { className: "cypress-booking-ref-not-found-error-message", children: "Could not find a calendar booking to reschedule" }) }));
     }
-    return (React.createElement("div", { className: "ob-scheduling-booking-form" },
-        React.createElement(NylasScheduling, { sessionId: sessionId, eventOverrides: {
+    return (_jsx("div", { className: "ob-scheduling-booking-form", children: _jsx(NylasScheduling, { sessionId: sessionId, eventOverrides: {
                 timeslotConfirmed: onTimeSlotConfirmed,
                 bookedEventInfo: async (event) => {
                     var _a;
@@ -28,10 +27,10 @@ function NylasReschedulingForm({ submissionId, name, email, sessionId, bookingRe
                 additionalFields: {
                     submissionId: { value: submissionId, type: 'text' },
                 },
-            }, themeConfig: themeConfig, enableUserFeedback: false, rescheduleBookingRef: bookingRef, nylasBranding: false })));
+            }, themeConfig: themeConfig, enableUserFeedback: false, rescheduleBookingRef: bookingRef, nylasBranding: false }) }));
 }
 function ReschedulingForm() {
-    return (React.createElement(CalendarBookingsContainer, { fetchConfiguration: schedulingService.createNylasExistingBookingSession }, (props) => React.createElement(NylasReschedulingForm, { ...props })));
+    return (_jsx(CalendarBookingsContainer, { fetchConfiguration: schedulingService.createNylasExistingBookingSession, children: (props) => _jsx(NylasReschedulingForm, { ...props }) }));
 }
 export default React.memo(ReschedulingForm);
 //# sourceMappingURL=CalendarBookingsReschedulingForm.js.map

package/dist/components/calendar-bookings/CalendarBookingsReschedulingForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarBookingsReschedulingForm.js","sourceRoot":"","sources":["../../../src/components/calendar-bookings/CalendarBookingsReschedulingForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAClD,OAAO,YAAY,MAAM,0BAA0B,CAAA;AACnD,OAAO,yBAAyB,MAAM,6BAA6B,CAAA;AACnE,OAAO,mBAAmB,MAAM,4BAA4B,CAAA;AAE5D,SAAS,qBAAqB,CAAC,EAC7B,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,SAAS,EACT,UAAU,GAKX;IACC,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,WAAW,EAAE,GACzD,mBAAmB,EAAE,CAAA;IAEvB,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,CACL,oBAAC,YAAY,IAAC,KAAK,EAAC,uBAAuB,EAAC,SAAS;YACnD,8BAAM,SAAS,EAAC,6CAA6C,sDAEtD,CACM,CAChB,CAAA;IACH,CAAC;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,4BAA4B;QACzC,oBAAC,eAAe,IACd,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE;gBACd,iBAAiB,EAAE,mBAAmB;gBACtC,eAAe,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;;oBAC/B,KAAK,CAAC,cAAc,EAAE,CAAA;oBACtB,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;wBACvB,eAAe,CACb,MAAA,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,mCAAI,wBAAwB,CACvD,CAAA;oBACH,CAAC;gBACH,CAAC;aACF,EACD,WAAW,EAAE;gBACX,kBAAkB,EAAE;oBAClB,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE;oBAChB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE;iBACnB;gBACD,gBAAgB,EAAE;oBAChB,YAAY,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE;iBACpD;aACF,EACD,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,KAAK,EACzB,oBAAoB,EAAE,UAAU,EAChC,aAAa,EAAE,KAAK,GACpB,CACE,CACP,CAAA;AACH,CAAC;AAED,SAAS,gBAAgB;IACvB,OAAO,CACL,oBAAC,yBAAyB,IACxB,kBAAkB,EAAE,iBAAiB,CAAC,iCAAiC,IAEtE,CAAC,KAAK,EAAE,EAAE,CAAC,oBAAC,qBAAqB,OAAK,KAAK,GAAI,CACtB,CAC7B,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { NylasScheduling } from '@nylas/react'\nimport { schedulingService } from '@oneblink/apps'\nimport ErrorMessage from '../messages/ErrorMessage'\nimport CalendarBookingsContainer from './CalendarBookingsContainer'\nimport useCalendarBookings from './CalendarBookingsProvider'\n\nfunction NylasReschedulingForm({\n  submissionId,\n  name,\n  email,\n  sessionId,\n  bookingRef,\n}: Awaited<\n  ReturnType<typeof schedulingService.createNylasExistingBookingSession>\n> & {\n  submissionId: string\n}) {\n  const { setBookingError, onTimeSlotConfirmed, themeConfig } =\n    useCalendarBookings()\n\n  if (!bookingRef) {\n    return (\n      <ErrorMessage title=\"Error Retrieving Data\" gutterTop>\n        <span className=\"cypress-booking-ref-not-found-error-message\">\n          Could not find a calendar booking to reschedule\n        </span>\n      </ErrorMessage>\n    )\n  }\n\n  return (\n    <div className=\"ob-scheduling-booking-form\">\n      <NylasScheduling\n        sessionId={sessionId}\n        eventOverrides={{\n          timeslotConfirmed: onTimeSlotConfirmed,\n          bookedEventInfo: async (event) => {\n            event.preventDefault()\n            if (event.detail.error) {\n              setBookingError(\n                event.detail.error.message ?? 'Calendar Booking Error',\n              )\n            }\n          },\n        }}\n        bookingInfo={{\n          primaryParticipant: {\n            name: name ?? '',\n            email: email ?? '',\n          },\n          additionalFields: {\n            submissionId: { value: submissionId, type: 'text' },\n          },\n        }}\n        themeConfig={themeConfig}\n        enableUserFeedback={false}\n        rescheduleBookingRef={bookingRef}\n        nylasBranding={false}\n      />\n    </div>\n  )\n}\n\nfunction ReschedulingForm() {\n  return (\n    <CalendarBookingsContainer\n      fetchConfiguration={schedulingService.createNylasExistingBookingSession}\n    >\n      {(props) => <NylasReschedulingForm {...props} />}\n    </CalendarBookingsContainer>\n  )\n}\n\nexport default React.memo(ReschedulingForm)\n"]}
+{"version":3,"file":"CalendarBookingsReschedulingForm.js","sourceRoot":"","sources":["../../../src/components/calendar-bookings/CalendarBookingsReschedulingForm.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAClD,OAAO,YAAY,MAAM,0BAA0B,CAAA;AACnD,OAAO,yBAAyB,MAAM,6BAA6B,CAAA;AACnE,OAAO,mBAAmB,MAAM,4BAA4B,CAAA;AAE5D,SAAS,qBAAqB,CAAC,EAC7B,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,SAAS,EACT,UAAU,GAKX;IACC,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,WAAW,EAAE,GACzD,mBAAmB,EAAE,CAAA;IAEvB,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,CACL,KAAC,YAAY,IAAC,KAAK,EAAC,uBAAuB,EAAC,SAAS,kBACnD,eAAM,SAAS,EAAC,6CAA6C,gEAEtD,GACM,CAChB,CAAA;IACH,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAC,4BAA4B,YACzC,KAAC,eAAe,IACd,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE;gBACd,iBAAiB,EAAE,mBAAmB;gBACtC,eAAe,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;;oBAC/B,KAAK,CAAC,cAAc,EAAE,CAAA;oBACtB,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;wBACvB,eAAe,CACb,MAAA,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,mCAAI,wBAAwB,CACvD,CAAA;oBACH,CAAC;gBACH,CAAC;aACF,EACD,WAAW,EAAE;gBACX,kBAAkB,EAAE;oBAClB,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE;oBAChB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE;iBACnB;gBACD,gBAAgB,EAAE;oBAChB,YAAY,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE;iBACpD;aACF,EACD,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,KAAK,EACzB,oBAAoB,EAAE,UAAU,EAChC,aAAa,EAAE,KAAK,GACpB,GACE,CACP,CAAA;AACH,CAAC;AAED,SAAS,gBAAgB;IACvB,OAAO,CACL,KAAC,yBAAyB,IACxB,kBAAkB,EAAE,iBAAiB,CAAC,iCAAiC,YAEtE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,qBAAqB,OAAK,KAAK,GAAI,GACtB,CAC7B,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { NylasScheduling } from '@nylas/react'\nimport { schedulingService } from '@oneblink/apps'\nimport ErrorMessage from '../messages/ErrorMessage'\nimport CalendarBookingsContainer from './CalendarBookingsContainer'\nimport useCalendarBookings from './CalendarBookingsProvider'\n\nfunction NylasReschedulingForm({\n  submissionId,\n  name,\n  email,\n  sessionId,\n  bookingRef,\n}: Awaited<\n  ReturnType<typeof schedulingService.createNylasExistingBookingSession>\n> & {\n  submissionId: string\n}) {\n  const { setBookingError, onTimeSlotConfirmed, themeConfig } =\n    useCalendarBookings()\n\n  if (!bookingRef) {\n    return (\n      <ErrorMessage title=\"Error Retrieving Data\" gutterTop>\n        <span className=\"cypress-booking-ref-not-found-error-message\">\n          Could not find a calendar booking to reschedule\n        </span>\n      </ErrorMessage>\n    )\n  }\n\n  return (\n    <div className=\"ob-scheduling-booking-form\">\n      <NylasScheduling\n        sessionId={sessionId}\n        eventOverrides={{\n          timeslotConfirmed: onTimeSlotConfirmed,\n          bookedEventInfo: async (event) => {\n            event.preventDefault()\n            if (event.detail.error) {\n              setBookingError(\n                event.detail.error.message ?? 'Calendar Booking Error',\n              )\n            }\n          },\n        }}\n        bookingInfo={{\n          primaryParticipant: {\n            name: name ?? '',\n            email: email ?? '',\n          },\n          additionalFields: {\n            submissionId: { value: submissionId, type: 'text' },\n          },\n        }}\n        themeConfig={themeConfig}\n        enableUserFeedback={false}\n        rescheduleBookingRef={bookingRef}\n        nylasBranding={false}\n      />\n    </div>\n  )\n}\n\nfunction ReschedulingForm() {\n  return (\n    <CalendarBookingsContainer\n      fetchConfiguration={schedulingService.createNylasExistingBookingSession}\n    >\n      {(props) => <NylasReschedulingForm {...props} />}\n    </CalendarBookingsContainer>\n  )\n}\n\nexport default React.memo(ReschedulingForm)\n"]}

package/dist/components/calendar-bookings/ErrorModal.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import clsx from 'clsx';
 import { OneBlinkAppsError } from '@oneblink/apps';
@@ -31,18 +32,13 @@ function ErrorModal({ error, closeButtonLabel, closeButtonClassName, onClose, })
     if (!displayError) {
         return null;
     }
-    return (React.createElement(Modal, { isOpen: true, title: displayError.title, className: "cypress-error-modal", cardClassName: clsx({
+    return (_jsx(Modal, { isOpen: true, title: displayError.title, className: "cypress-error-modal", cardClassName: clsx({
             'has-text-centered': displayError.isOffline,
-        }), titleClassName: "cypress-error-title", bodyClassName: "cypress-error-message", actions: React.createElement(React.Fragment, null,
-            React.createElement("button", { type: "button", className: clsx('button ob-button cypress-close-error is-primary', closeButtonClassName), onClick: handleClose, autoFocus: true }, closeButtonLabel || 'Okay')) },
-        React.createElement(React.Fragment, null,
-            React.createElement("div", { 
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML: {
-                    __html: sanitizedHtml,
-                } }),
-            displayError.isOffline && (React.createElement(MaterialIcon, { className: "has-text-warning icon-x-large" }, "wifi_off")),
-            React.createElement(OneBlinkAppsErrorOriginalMessage, { error: displayError.originalError }))));
+        }), titleClassName: "cypress-error-title", bodyClassName: "cypress-error-message", actions: _jsx(_Fragment, { children: _jsx("button", { type: "button", className: clsx('button ob-button cypress-close-error is-primary', closeButtonClassName), onClick: handleClose, autoFocus: true, children: closeButtonLabel || 'Okay' }) }), children: _jsxs(_Fragment, { children: [_jsx("div", { 
+                    // eslint-disable-next-line react/no-danger
+                    dangerouslySetInnerHTML: {
+                        __html: sanitizedHtml,
+                    } }), displayError.isOffline && (_jsx(MaterialIcon, { className: "has-text-warning icon-x-large", children: "wifi_off" })), _jsx(OneBlinkAppsErrorOriginalMessage, { error: displayError.originalError })] }) }));
 }
 export default React.memo(ErrorModal);
 //# sourceMappingURL=ErrorModal.js.map

package/dist/components/calendar-bookings/ErrorModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorModal.js","sourceRoot":"","sources":["../../../src/components/calendar-bookings/ErrorModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAClD,OAAO,gCAAgC,MAAM,8CAA8C,CAAA;AAC3F,OAAO,YAAY,MAAM,8BAA8B,CAAA;AACvD,OAAO,KAAK,MAAM,mBAAmB,CAAA;AACrC,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAS1C,SAAS,UAAU,CAAC,EAClB,KAAK,EACL,gBAAgB,EAChB,oBAAoB,EACpB,OAAO,GACD;IACN,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,CAAC,KAAK;YAAE,OAAM;QAClB,IAAI,YAAY,CAAA;QAEhB,IAAI,CAAC,CAAC,KAAK,YAAY,iBAAiB,CAAC,EAAE,CAAC;YAC1C,YAAY,GAAG,IAAI,iBAAiB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;QACrD,CAAC;aAAM,CAAC;YACN,YAAY,GAAG,KAAK,CAAA;QACtB,CAAC;QACD,OAAO,YAAY,CAAA;IACrB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACvC,IAAI,CAAC,KAAK;YAAE,OAAO,EAAE,CAAA;QACrB,OAAO,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IACpC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAC/C,IAAI,CAAC,YAAY;YAAE,OAAM;QAEzB,OAAO,EAAE,CAAA;IACX,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAA;IAE3B,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,oBAAC,KAAK,IACJ,MAAM,QACN,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,SAAS,EAAC,qBAAqB,EAC/B,aAAa,EAAE,IAAI,CAAC;YAClB,mBAAmB,EAAE,YAAY,CAAC,SAAS;SAC5C,CAAC,EACF,cAAc,EAAC,qBAAqB,EACpC,aAAa,EAAC,uBAAuB,EACrC,OAAO,EACL;YACE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CACb,iDAAiD,EACjD,oBAAoB,CACrB,EACD,OAAO,EAAE,WAAW,EACpB,SAAS,UAER,gBAAgB,IAAI,MAAM,CACpB,CACR;QAGL;YACE;gBACE,2CAA2C;gBAC3C,uBAAuB,EAAE;oBACvB,MAAM,EAAE,aAAa;iBACtB,GACD;YACD,YAAY,CAAC,SAAS,IAAI,CACzB,oBAAC,YAAY,IAAC,SAAS,EAAC,+BAA+B,eAExC,CAChB;YACD,oBAAC,gCAAgC,IAAC,KAAK,EAAE,YAAY,CAAC,aAAa,GAAI,CACtE,CACG,CACT,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,UAAU,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { OneBlinkAppsError } from '@oneblink/apps'\nimport OneBlinkAppsErrorOriginalMessage from '../renderer/OneBlinkAppsErrorOriginalMessage'\nimport sanitizeHtml from '../../services/sanitize-html'\nimport Modal from '../renderer/Modal'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n  error: OneBlinkAppsError | Error | null\n  closeButtonLabel?: string\n  closeButtonClassName?: string\n  onClose: () => unknown\n}\n\nfunction ErrorModal({\n  error,\n  closeButtonLabel,\n  closeButtonClassName,\n  onClose,\n}: Props) {\n  const displayError = React.useMemo(() => {\n    if (!error) return\n    let displayError\n\n    if (!(error instanceof OneBlinkAppsError)) {\n      displayError = new OneBlinkAppsError(error.message)\n    } else {\n      displayError = error\n    }\n    return displayError\n  }, [error])\n\n  const sanitizedHtml = React.useMemo(() => {\n    if (!error) return ''\n    return sanitizeHtml(error.message)\n  }, [error])\n\n  const handleClose = React.useCallback(async () => {\n    if (!displayError) return\n\n    onClose()\n  }, [displayError, onClose])\n\n  if (!displayError) {\n    return null\n  }\n\n  return (\n    <Modal\n      isOpen\n      title={displayError.title}\n      className=\"cypress-error-modal\"\n      cardClassName={clsx({\n        'has-text-centered': displayError.isOffline,\n      })}\n      titleClassName=\"cypress-error-title\"\n      bodyClassName=\"cypress-error-message\"\n      actions={\n        <>\n          <button\n            type=\"button\"\n            className={clsx(\n              'button ob-button cypress-close-error is-primary',\n              closeButtonClassName,\n            )}\n            onClick={handleClose}\n            autoFocus\n          >\n            {closeButtonLabel || 'Okay'}\n          </button>\n        </>\n      }\n    >\n      <>\n        <div\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{\n            __html: sanitizedHtml,\n          }}\n        />\n        {displayError.isOffline && (\n          <MaterialIcon className=\"has-text-warning icon-x-large\">\n            wifi_off\n          </MaterialIcon>\n        )}\n        <OneBlinkAppsErrorOriginalMessage error={displayError.originalError} />\n      </>\n    </Modal>\n  )\n}\n\nexport default React.memo<Props>(ErrorModal)\n"]}
+{"version":3,"file":"ErrorModal.js","sourceRoot":"","sources":["../../../src/components/calendar-bookings/ErrorModal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAClD,OAAO,gCAAgC,MAAM,8CAA8C,CAAA;AAC3F,OAAO,YAAY,MAAM,8BAA8B,CAAA;AACvD,OAAO,KAAK,MAAM,mBAAmB,CAAA;AACrC,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAS1C,SAAS,UAAU,CAAC,EAClB,KAAK,EACL,gBAAgB,EAChB,oBAAoB,EACpB,OAAO,GACD;IACN,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,CAAC,KAAK;YAAE,OAAM;QAClB,IAAI,YAAY,CAAA;QAEhB,IAAI,CAAC,CAAC,KAAK,YAAY,iBAAiB,CAAC,EAAE,CAAC;YAC1C,YAAY,GAAG,IAAI,iBAAiB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;QACrD,CAAC;aAAM,CAAC;YACN,YAAY,GAAG,KAAK,CAAA;QACtB,CAAC;QACD,OAAO,YAAY,CAAA;IACrB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACvC,IAAI,CAAC,KAAK;YAAE,OAAO,EAAE,CAAA;QACrB,OAAO,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IACpC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAC/C,IAAI,CAAC,YAAY;YAAE,OAAM;QAEzB,OAAO,EAAE,CAAA;IACX,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAA;IAE3B,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,KAAC,KAAK,IACJ,MAAM,QACN,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,SAAS,EAAC,qBAAqB,EAC/B,aAAa,EAAE,IAAI,CAAC;YAClB,mBAAmB,EAAE,YAAY,CAAC,SAAS;SAC5C,CAAC,EACF,cAAc,EAAC,qBAAqB,EACpC,aAAa,EAAC,uBAAuB,EACrC,OAAO,EACL,4BACE,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CACb,iDAAiD,EACjD,oBAAoB,CACrB,EACD,OAAO,EAAE,WAAW,EACpB,SAAS,kBAER,gBAAgB,IAAI,MAAM,GACpB,GACR,YAGL,8BACE;oBACE,2CAA2C;oBAC3C,uBAAuB,EAAE;wBACvB,MAAM,EAAE,aAAa;qBACtB,GACD,EACD,YAAY,CAAC,SAAS,IAAI,CACzB,KAAC,YAAY,IAAC,SAAS,EAAC,+BAA+B,yBAExC,CAChB,EACD,KAAC,gCAAgC,IAAC,KAAK,EAAE,YAAY,CAAC,aAAa,GAAI,IACtE,GACG,CACT,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,UAAU,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { OneBlinkAppsError } from '@oneblink/apps'\nimport OneBlinkAppsErrorOriginalMessage from '../renderer/OneBlinkAppsErrorOriginalMessage'\nimport sanitizeHtml from '../../services/sanitize-html'\nimport Modal from '../renderer/Modal'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n  error: OneBlinkAppsError | Error | null\n  closeButtonLabel?: string\n  closeButtonClassName?: string\n  onClose: () => unknown\n}\n\nfunction ErrorModal({\n  error,\n  closeButtonLabel,\n  closeButtonClassName,\n  onClose,\n}: Props) {\n  const displayError = React.useMemo(() => {\n    if (!error) return\n    let displayError\n\n    if (!(error instanceof OneBlinkAppsError)) {\n      displayError = new OneBlinkAppsError(error.message)\n    } else {\n      displayError = error\n    }\n    return displayError\n  }, [error])\n\n  const sanitizedHtml = React.useMemo(() => {\n    if (!error) return ''\n    return sanitizeHtml(error.message)\n  }, [error])\n\n  const handleClose = React.useCallback(async () => {\n    if (!displayError) return\n\n    onClose()\n  }, [displayError, onClose])\n\n  if (!displayError) {\n    return null\n  }\n\n  return (\n    <Modal\n      isOpen\n      title={displayError.title}\n      className=\"cypress-error-modal\"\n      cardClassName={clsx({\n        'has-text-centered': displayError.isOffline,\n      })}\n      titleClassName=\"cypress-error-title\"\n      bodyClassName=\"cypress-error-message\"\n      actions={\n        <>\n          <button\n            type=\"button\"\n            className={clsx(\n              'button ob-button cypress-close-error is-primary',\n              closeButtonClassName,\n            )}\n            onClick={handleClose}\n            autoFocus\n          >\n            {closeButtonLabel || 'Okay'}\n          </button>\n        </>\n      }\n    >\n      <>\n        <div\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{\n            __html: sanitizedHtml,\n          }}\n        />\n        {displayError.isOffline && (\n          <MaterialIcon className=\"has-text-warning icon-x-large\">\n            wifi_off\n          </MaterialIcon>\n        )}\n        <OneBlinkAppsErrorOriginalMessage error={displayError.originalError} />\n      </>\n    </Modal>\n  )\n}\n\nexport default React.memo<Props>(ErrorModal)\n"]}

package/dist/components/downloadable-files/LayoutProvider.d.ts

@@ -3,5 +3,5 @@ export type LayoutType = 'GRID' | 'LIST';
 export declare const LayoutProvider: ({ children, layout, }: {
     children: React.ReactNode;
     layout: LayoutType;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const useLayout: () => LayoutType;

package/dist/components/downloadable-files/LayoutProvider.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 const LayoutContext = React.createContext('GRID');
 export const LayoutProvider = ({ children, layout, }) => {
-    return (React.createElement(LayoutContext.Provider, { value: layout }, children));
+    return (_jsx(LayoutContext.Provider, { value: layout, children: children }));
 };
 export const useLayout = () => {
     return React.useContext(LayoutContext);

package/dist/components/downloadable-files/LayoutProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutProvider.js","sourceRoot":"","sources":["../../../src/components/downloadable-files/LayoutProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa,CAAa,MAAM,CAAC,CAAA;AAE7D,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,MAAM,GAIP,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,IAAG,QAAQ,CAA0B,CAC3E,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAA;AACxC,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nexport type LayoutType = 'GRID' | 'LIST'\n\nconst LayoutContext = React.createContext<LayoutType>('GRID')\n\nexport const LayoutProvider = ({\n  children,\n  layout,\n}: {\n  children: React.ReactNode\n  layout: LayoutType\n}) => {\n  return (\n    <LayoutContext.Provider value={layout}>{children}</LayoutContext.Provider>\n  )\n}\n\nexport const useLayout = () => {\n  return React.useContext(LayoutContext)\n}\n"]}
+{"version":3,"file":"LayoutProvider.js","sourceRoot":"","sources":["../../../src/components/downloadable-files/LayoutProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa,CAAa,MAAM,CAAC,CAAA;AAE7D,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,MAAM,GAIP,EAAE,EAAE;IACH,OAAO,CACL,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,YAAG,QAAQ,GAA0B,CAC3E,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAA;AACxC,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nexport type LayoutType = 'GRID' | 'LIST'\n\nconst LayoutContext = React.createContext<LayoutType>('GRID')\n\nexport const LayoutProvider = ({\n  children,\n  layout,\n}: {\n  children: React.ReactNode\n  layout: LayoutType\n}) => {\n  return (\n    <LayoutContext.Provider value={layout}>{children}</LayoutContext.Provider>\n  )\n}\n\nexport const useLayout = () => {\n  return React.useContext(LayoutContext)\n}\n"]}

package/dist/components/downloadable-files/index.d.ts

@@ -12,7 +12,7 @@ declare function DownloadableFiles({ formSubmissionResult, divider, layout, }: {
      * some screen sizes. `LIST` will always render each file on a new line.
      */
     layout?: LayoutType;
-}): React.JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element | null;
 /**
  * Component for rendering post-submission downloadable files such as PDFs and
  * attachments. The only thing required is the `formSubmissionResult`.

package/dist/components/downloadable-files/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { localisationService, authService, } from '@oneblink/apps';
 import { OnlyPDFDisplay, LoadAndDisplayAttachments, SingleFileDisplay, } from './resource-components';
@@ -33,7 +34,7 @@ function DownloadableFiles({ formSubmissionResult, divider, layout, }) {
             return formSubmissionResult.downloadSubmissionPdfs.reduce((memo, { id, configuration, url }) => {
                 memo.push({
                     key: `pdf-file-node-${id}`,
-                    node: (React.createElement(SingleFileDisplay, { attachment: {
+                    node: (_jsx(SingleFileDisplay, { attachment: {
                             filename: getSubmissionPDFFileName(configuration),
                             signedUrl: url,
                             contentType: 'application/pdf',
@@ -46,10 +47,7 @@ function DownloadableFiles({ formSubmissionResult, divider, layout, }) {
     if (!formSubmissionResult.attachmentsAccessToken && !pdfFileNodes) {
         return null;
     }
-    return (React.createElement("div", { className: "ob-downloadable-files__wrapper" },
-        React.createElement(LayoutProvider, { layout: layout !== null && layout !== void 0 ? layout : 'GRID' },
-            divider && React.createElement("hr", { className: "divider" }),
-            pdfFileNodes && !formSubmissionResult.attachmentsAccessToken ? (React.createElement(OnlyPDFDisplay, null, pdfFileNodes)) : (React.createElement(LoadAndDisplayAttachments, { formSubmissionResult: formSubmissionResult, pdfFileNodes: pdfFileNodes })))));
+    return (_jsx("div", { className: "ob-downloadable-files__wrapper", children: _jsxs(LayoutProvider, { layout: layout !== null && layout !== void 0 ? layout : 'GRID', children: [divider && _jsx("hr", { className: "divider" }), pdfFileNodes && !formSubmissionResult.attachmentsAccessToken ? (_jsx(OnlyPDFDisplay, { children: pdfFileNodes })) : (_jsx(LoadAndDisplayAttachments, { formSubmissionResult: formSubmissionResult, pdfFileNodes: pdfFileNodes }))] }) }));
 }
 /**
  * Component for rendering post-submission downloadable files such as PDFs and

package/dist/components/downloadable-files/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/downloadable-files/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAEL,mBAAmB,EACnB,WAAW,GACZ,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACL,cAAc,EACd,yBAAyB,EACzB,iBAAiB,GAClB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAc,MAAM,kBAAkB,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAGnC,SAAS,iBAAiB,CAAC,EACzB,oBAAoB,EACpB,OAAO,EACP,MAAM,GAYP;IACC,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,gBAAkC,EAAE,EAAE;;QACrC,MAAM,cAAc,GAAG,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,CAAA;QACpD,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO,YAAY,CAAA;QACrB,CAAC;QAED,OAAO,mBAAmB,CAAC,sCAAsC,CAC/D,cAAc,EACd;YACE,kBAAkB,EAChB,oBAAoB,CAAC,gCAAgC;YACvD,IAAI,EAAE,oBAAoB,CAAC,UAAU;YACrC,UAAU,EAAE,oBAAoB,CAAC,UAAU;YAC3C,YAAY,EAAE,oBAAoB,CAAC,YAAY,IAAI,EAAE;YACrD,mBAAmB,EAAE,oBAAoB,CAAC,mBAAmB,IAAI,EAAE;YACnE,UAAU,EAAE,oBAAoB,CAAC,UAAU,IAAI,SAAS;YACxD,WAAW,EAAE,WAAW,CAAC,cAAc,EAAE,IAAI,SAAS;YACtD,IAAI,EAAE,MAAA,oBAAoB,CAAC,cAAc,0CAAE,IAAI;YAC/C,SAAS,EAAE,MAAA,oBAAoB,CAAC,cAAc,0CAAE,SAAS;YACzD,iBAAiB,EACf,MAAA,oBAAoB,CAAC,cAAc,0CAAE,iBAAiB;SACzD,CACF,CAAC,IAAI,CAAA;IACR,CAAC,EACD,CAAC,oBAAoB,CAAC,CACvB,CAAA;IAED,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;;QACtC,MAAM,gBAAgB,GACpB,MAAA,oBAAoB,CAAC,UAAU,CAAC,qBAAqB,0CAAE,gBAAgB,CAAA;QAEzE,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtB,OAAM;QACR,CAAC;QAED,IAAI,oBAAoB,CAAC,sBAAsB,EAAE,CAAC;YAChD,OAAO,oBAAoB,CAAC,sBAAsB,CAAC,MAAM,CAKvD,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,EAAE,EAAE;gBACrC,IAAI,CAAC,IAAI,CAAC;oBACR,GAAG,EAAE,iBAAiB,EAAE,EAAE;oBAC1B,IAAI,EAAE,CACJ,oBAAC,iBAAiB,IAChB,UAAU,EAAE;4BACV,QAAQ,EAAE,wBAAwB,CAAC,aAAa,CAAC;4BACjD,SAAS,EAAE,GAAG;4BACd,WAAW,EAAE,iBAAiB;yBAC/B,EACD,SAAS,EAAE,uCAAuC,EAAE,EAAE,GACtD,CACH;iBACF,CAAC,CAAA;gBAEF,OAAO,IAAI,CAAA;YACb,CAAC,EAAE,EAAE,CAAC,CAAA;QACR,CAAC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,wBAAwB,CAAC,CAAC,CAAA;IAEpD,IAAI,CAAC,oBAAoB,CAAC,sBAAsB,IAAI,CAAC,YAAY,EAAE,CAAC;QAClE,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,gCAAgC;QAC7C,oBAAC,cAAc,IAAC,MAAM,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,MAAM;YACrC,OAAO,IAAI,4BAAI,SAAS,EAAC,SAAS,GAAG;YACrC,YAAY,IAAI,CAAC,oBAAoB,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAC9D,oBAAC,cAAc,QAAE,YAAY,CAAkB,CAChD,CAAC,CAAC,CAAC,CACF,oBAAC,yBAAyB,IACxB,oBAAoB,EAAE,oBAAoB,EAC1C,YAAY,EAAE,YAAY,GAC1B,CACH,CACc,CACb,CACP,CAAA;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,eAAe,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport {\n  submissionService,\n  localisationService,\n  authService,\n} from '@oneblink/apps'\nimport {\n  OnlyPDFDisplay,\n  LoadAndDisplayAttachments,\n  SingleFileDisplay,\n} from './resource-components'\nimport { LayoutProvider, LayoutType } from './LayoutProvider'\nimport { useCallback } from 'react'\nimport { PDFConfiguration } from '@oneblink/types/typescript/submissionEvents'\n\nfunction DownloadableFiles({\n  formSubmissionResult,\n  divider,\n  layout,\n}: {\n  /** The form submission with the pdf and/or attachments config on it. */\n  formSubmissionResult: submissionService.FormSubmissionResult\n  /** Whether to render a divider above the content. */\n  divider?: boolean\n  /**\n   * The layout to use for the downloadable files. Options are `GRID` and\n   * `LIST`. Defaults to `GRID`. `GRID` will render files next to each other at\n   * some screen sizes. `LIST` will always render each file on a new line.\n   */\n  layout?: LayoutType\n}) {\n  const getSubmissionPDFFileName = useCallback(\n    (pdfConfiguration: PDFConfiguration) => {\n      const customFileName = pdfConfiguration?.pdfFileName\n      if (!customFileName) {\n        return 'Submission'\n      }\n\n      return localisationService.replaceInjectablesWithSubmissionValues(\n        customFileName,\n        {\n          previousApprovalId:\n            formSubmissionResult.previousFormSubmissionApprovalId,\n          form: formSubmissionResult.definition,\n          submission: formSubmissionResult.submission,\n          submissionId: formSubmissionResult.submissionId || '',\n          submissionTimestamp: formSubmissionResult.submissionTimestamp || '',\n          externalId: formSubmissionResult.externalId || undefined,\n          userProfile: authService.getUserProfile() || undefined,\n          task: formSubmissionResult.taskCompletion?.task,\n          taskGroup: formSubmissionResult.taskCompletion?.taskGroup,\n          taskGroupInstance:\n            formSubmissionResult.taskCompletion?.taskGroupInstance,\n        },\n      ).text\n    },\n    [formSubmissionResult],\n  )\n\n  const pdfFileNodes = React.useMemo(() => {\n    const allowPDFDownload =\n      formSubmissionResult.definition.postSubmissionReceipt?.allowPDFDownload\n\n    if (!allowPDFDownload) {\n      return\n    }\n\n    if (formSubmissionResult.downloadSubmissionPdfs) {\n      return formSubmissionResult.downloadSubmissionPdfs.reduce<\n        Array<{\n          key: string\n          node: React.ReactNode\n        }>\n      >((memo, { id, configuration, url }) => {\n        memo.push({\n          key: `pdf-file-node-${id}`,\n          node: (\n            <SingleFileDisplay\n              attachment={{\n                filename: getSubmissionPDFFileName(configuration),\n                signedUrl: url,\n                contentType: 'application/pdf',\n              }}\n              className={`cypress-receipt-download-pdf-button-${id}`}\n            />\n          ),\n        })\n\n        return memo\n      }, [])\n    }\n  }, [formSubmissionResult, getSubmissionPDFFileName])\n\n  if (!formSubmissionResult.attachmentsAccessToken && !pdfFileNodes) {\n    return null\n  }\n\n  return (\n    <div className=\"ob-downloadable-files__wrapper\">\n      <LayoutProvider layout={layout ?? 'GRID'}>\n        {divider && <hr className=\"divider\" />}\n        {pdfFileNodes && !formSubmissionResult.attachmentsAccessToken ? (\n          <OnlyPDFDisplay>{pdfFileNodes}</OnlyPDFDisplay>\n        ) : (\n          <LoadAndDisplayAttachments\n            formSubmissionResult={formSubmissionResult}\n            pdfFileNodes={pdfFileNodes}\n          />\n        )}\n      </LayoutProvider>\n    </div>\n  )\n}\n\n/**\n * Component for rendering post-submission downloadable files such as PDFs and\n * attachments. The only thing required is the `formSubmissionResult`.\n *\n * It is also recommended to import the `css` from this library as well.\n *\n * ```js\n * import { DownloadableFiles } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n * ```\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { DownloadableFiles } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * function SubmissionContainer() {\n *\n *   const [state, setState] = useState(null)\n *\n *   const handleSubmit = React.useCallback(async () => {\n *     ...\n *     setState(result)\n *   }, [])\n *\n *   return (\n *     <div>\n *      ...\n *       {state && (\n *         <DownloadableFiles formSubmissionResult={state} />\n *       )}\n *     </div>\n *   )\n * }\n *\n * function App() {\n *   return (\n *     <IsOfflineContextProvider>\n *       <SubmissionContainer />\n *     </IsOfflineContextProvider>\n *   )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n *   ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(DownloadableFiles)\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/downloadable-files/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport {\n  submissionService,\n  localisationService,\n  authService,\n} from '@oneblink/apps'\nimport {\n  OnlyPDFDisplay,\n  LoadAndDisplayAttachments,\n  SingleFileDisplay,\n} from './resource-components'\nimport { LayoutProvider, LayoutType } from './LayoutProvider'\nimport { useCallback } from 'react'\nimport { PDFConfiguration } from '@oneblink/types/typescript/submissionEvents'\n\nfunction DownloadableFiles({\n  formSubmissionResult,\n  divider,\n  layout,\n}: {\n  /** The form submission with the pdf and/or attachments config on it. */\n  formSubmissionResult: submissionService.FormSubmissionResult\n  /** Whether to render a divider above the content. */\n  divider?: boolean\n  /**\n   * The layout to use for the downloadable files. Options are `GRID` and\n   * `LIST`. Defaults to `GRID`. `GRID` will render files next to each other at\n   * some screen sizes. `LIST` will always render each file on a new line.\n   */\n  layout?: LayoutType\n}) {\n  const getSubmissionPDFFileName = useCallback(\n    (pdfConfiguration: PDFConfiguration) => {\n      const customFileName = pdfConfiguration?.pdfFileName\n      if (!customFileName) {\n        return 'Submission'\n      }\n\n      return localisationService.replaceInjectablesWithSubmissionValues(\n        customFileName,\n        {\n          previousApprovalId:\n            formSubmissionResult.previousFormSubmissionApprovalId,\n          form: formSubmissionResult.definition,\n          submission: formSubmissionResult.submission,\n          submissionId: formSubmissionResult.submissionId || '',\n          submissionTimestamp: formSubmissionResult.submissionTimestamp || '',\n          externalId: formSubmissionResult.externalId || undefined,\n          userProfile: authService.getUserProfile() || undefined,\n          task: formSubmissionResult.taskCompletion?.task,\n          taskGroup: formSubmissionResult.taskCompletion?.taskGroup,\n          taskGroupInstance:\n            formSubmissionResult.taskCompletion?.taskGroupInstance,\n        },\n      ).text\n    },\n    [formSubmissionResult],\n  )\n\n  const pdfFileNodes = React.useMemo(() => {\n    const allowPDFDownload =\n      formSubmissionResult.definition.postSubmissionReceipt?.allowPDFDownload\n\n    if (!allowPDFDownload) {\n      return\n    }\n\n    if (formSubmissionResult.downloadSubmissionPdfs) {\n      return formSubmissionResult.downloadSubmissionPdfs.reduce<\n        Array<{\n          key: string\n          node: React.ReactNode\n        }>\n      >((memo, { id, configuration, url }) => {\n        memo.push({\n          key: `pdf-file-node-${id}`,\n          node: (\n            <SingleFileDisplay\n              attachment={{\n                filename: getSubmissionPDFFileName(configuration),\n                signedUrl: url,\n                contentType: 'application/pdf',\n              }}\n              className={`cypress-receipt-download-pdf-button-${id}`}\n            />\n          ),\n        })\n\n        return memo\n      }, [])\n    }\n  }, [formSubmissionResult, getSubmissionPDFFileName])\n\n  if (!formSubmissionResult.attachmentsAccessToken && !pdfFileNodes) {\n    return null\n  }\n\n  return (\n    <div className=\"ob-downloadable-files__wrapper\">\n      <LayoutProvider layout={layout ?? 'GRID'}>\n        {divider && <hr className=\"divider\" />}\n        {pdfFileNodes && !formSubmissionResult.attachmentsAccessToken ? (\n          <OnlyPDFDisplay>{pdfFileNodes}</OnlyPDFDisplay>\n        ) : (\n          <LoadAndDisplayAttachments\n            formSubmissionResult={formSubmissionResult}\n            pdfFileNodes={pdfFileNodes}\n          />\n        )}\n      </LayoutProvider>\n    </div>\n  )\n}\n\n/**\n * Component for rendering post-submission downloadable files such as PDFs and\n * attachments. The only thing required is the `formSubmissionResult`.\n *\n * It is also recommended to import the `css` from this library as well.\n *\n * ```js\n * import { DownloadableFiles } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n * ```\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { DownloadableFiles } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * function SubmissionContainer() {\n *\n *   const [state, setState] = useState(null)\n *\n *   const handleSubmit = React.useCallback(async () => {\n *     ...\n *     setState(result)\n *   }, [])\n *\n *   return (\n *     <div>\n *      ...\n *       {state && (\n *         <DownloadableFiles formSubmissionResult={state} />\n *       )}\n *     </div>\n *   )\n * }\n *\n * function App() {\n *   return (\n *     <IsOfflineContextProvider>\n *       <SubmissionContainer />\n *     </IsOfflineContextProvider>\n *   )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n *   ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(DownloadableFiles)\n"]}

package/dist/components/downloadable-files/resource-components.d.ts

@@ -4,7 +4,7 @@ type Attachment = Awaited<ReturnType<typeof submissionService.getPostSubmissionA
 export declare const LoadAndDisplayAttachments: ({ pdfFileNodes, formSubmissionResult, }: {
     pdfFileNodes?: PDFFileNode[];
     formSubmissionResult: submissionService.FormSubmissionResult;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export type PDFFileNode = {
     key: string;
     node: React.ReactNode;
@@ -12,10 +12,10 @@ export type PDFFileNode = {
 export declare const SingleFileDisplay: ({ attachment, className, }: {
     attachment: Attachment;
     className?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 /** Centers the PDF Download button */
 export declare const OnlyPDFDisplay: ({ children, className, }: {
     children: PDFFileNode[];
     className?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/downloadable-files/resource-components.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { Collapse, Grid, LinearProgress, Tooltip } from '@mui/material';
 import MaterialIcon from '../MaterialIcon';
@@ -9,21 +10,9 @@ import { useLayout } from './LayoutProvider';
 export const LoadAndDisplayAttachments = ({ pdfFileNodes, formSubmissionResult, }) => {
     const loadAttachments = React.useCallback(() => submissionService.getPostSubmissionAttachments(formSubmissionResult), [formSubmissionResult]);
     const [attachmentsState] = useLoadDataState(loadAttachments);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Collapse, { in: attachmentsState.status === 'LOADING', unmountOnExit: true },
-            React.createElement("div", { className: "ob-downloadable-files__loading" },
-                React.createElement("div", { className: "ob-list__text-secondary mb-1 has-text-centered" }, "Loading Attachments..."),
-                React.createElement(LinearProgress, { className: "ob-progress__downloadable-files" }))),
-        React.createElement(Collapse, { in: attachmentsState.status === 'ERROR', unmountOnExit: true },
-            !!(pdfFileNodes === null || pdfFileNodes === void 0 ? void 0 : pdfFileNodes.length) && (React.createElement(React.Fragment, null,
-                React.createElement(OnlyPDFDisplay, { className: "ob-downloadable-files__error-pdf" }, pdfFileNodes))),
-            React.createElement("div", { className: "ob-downloadable-files__error has-text-centered" },
-                React.createElement(MaterialIcon, { className: "has-text-danger icon-large" }, "error"),
-                React.createElement(OneBlinkAppsErrorOriginalMessage, { error: attachmentsState.status === 'ERROR'
-                        ? attachmentsState.error
-                        : undefined }))),
-        React.createElement(Collapse, { in: attachmentsState.status === 'SUCCESS', unmountOnExit: true },
-            React.createElement(DownloadableFilesDisplay, { attachments: attachmentsState.status === 'SUCCESS' ? attachmentsState.result : [], pdfFileNodes: pdfFileNodes }))));
+    return (_jsxs(_Fragment, { children: [_jsx(Collapse, { in: attachmentsState.status === 'LOADING', unmountOnExit: true, children: _jsxs("div", { className: "ob-downloadable-files__loading", children: [_jsx("div", { className: "ob-list__text-secondary mb-1 has-text-centered", children: "Loading Attachments..." }), _jsx(LinearProgress, { className: "ob-progress__downloadable-files" })] }) }), _jsxs(Collapse, { in: attachmentsState.status === 'ERROR', unmountOnExit: true, children: [!!(pdfFileNodes === null || pdfFileNodes === void 0 ? void 0 : pdfFileNodes.length) && (_jsx(_Fragment, { children: _jsx(OnlyPDFDisplay, { className: "ob-downloadable-files__error-pdf", children: pdfFileNodes }) })), _jsxs("div", { className: "ob-downloadable-files__error has-text-centered", children: [_jsx(MaterialIcon, { className: "has-text-danger icon-large", children: "error" }), _jsx(OneBlinkAppsErrorOriginalMessage, { error: attachmentsState.status === 'ERROR'
+                                    ? attachmentsState.error
+                                    : undefined })] })] }), _jsx(Collapse, { in: attachmentsState.status === 'SUCCESS', unmountOnExit: true, children: _jsx(DownloadableFilesDisplay, { attachments: attachmentsState.status === 'SUCCESS' ? attachmentsState.result : [], pdfFileNodes: pdfFileNodes }) })] }));
 };
 function DownloadableFilesDisplay({ attachments, pdfFileNodes, }) {
     const layout = useLayout();
@@ -31,13 +20,8 @@ function DownloadableFilesDisplay({ attachments, pdfFileNodes, }) {
         var _a;
         return attachments.length + ((_a = pdfFileNodes === null || pdfFileNodes === void 0 ? void 0 : pdfFileNodes.length) !== null && _a !== void 0 ? _a : 0);
     }, [attachments, pdfFileNodes]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "ob-downloadable-files__container" },
-            React.createElement(Grid, { container: true, spacing: 2, justifyContent: totalToDisplay === 1 ? 'center' : undefined },
-                pdfFileNodes &&
-                    pdfFileNodes.map(({ node, key }) => (React.createElement(Grid, { item: true, xs: 12, sm: layout === 'GRID' ? 6 : 12, key: key }, node))),
-                attachments.map((attachment, index) => (React.createElement(Grid, { item: true, xs: 12, sm: layout === 'GRID' ? 6 : 12, key: index },
-                    React.createElement(SingleFileDisplay, { attachment: attachment }))))))));
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "ob-downloadable-files__container", children: _jsxs(Grid, { container: true, spacing: 2, justifyContent: totalToDisplay === 1 ? 'center' : undefined, children: [pdfFileNodes &&
+                        pdfFileNodes.map(({ node, key }) => (_jsx(Grid, { size: { xs: 12, sm: layout === 'GRID' ? 6 : 12 }, children: node }, key))), attachments.map((attachment, index) => (_jsx(Grid, { size: { xs: 12, sm: layout === 'GRID' ? 6 : 12 }, children: _jsx(SingleFileDisplay, { attachment: attachment }) }, index)))] }) }) }));
 }
 const getFileTypeIcon = (type) => {
     // Add other appropriate icons for file types here anytime
@@ -49,22 +33,15 @@ const getFileTypeIcon = (type) => {
 export const SingleFileDisplay = ({ attachment, className, }) => {
     const { avatar } = React.useMemo(() => {
         const avatar = () => {
-            return attachment.contentType.includes('image') ? (React.createElement("img", { src: attachment.signedUrl, alt: attachment.filename, className: "ob-downloadable-files__thumbnail" })) : (React.createElement(MaterialIcon, { className: "ob-downloadable-files__icon" }, getFileTypeIcon(attachment.contentType)));
+            return attachment.contentType.includes('image') ? (_jsx("img", { src: attachment.signedUrl, alt: attachment.filename, className: "ob-downloadable-files__thumbnail" })) : (_jsx(MaterialIcon, { className: "ob-downloadable-files__icon", children: getFileTypeIcon(attachment.contentType) }));
         };
         return { avatar: avatar() };
     }, [attachment.filename, attachment.contentType, attachment.signedUrl]);
-    return (React.createElement(Tooltip, { title: attachment.filename, arrow: true },
-        React.createElement("a", { href: attachment.signedUrl, target: "_blank", rel: "noreferrer", download: true, className: clsx('ob-downloadable-files__item', className) },
-            avatar,
-            React.createElement("div", { className: "ob-downloadable-files__content" },
-                React.createElement("div", { className: "ob-downloadable-files__filename ob-downloadable-files__text" }, attachment.filename),
-                React.createElement("div", { className: "ob-downloadable-files__filetype ob-downloadable-files__text" }, attachment.contentType.split('/')[1] || 'Unknown')),
-            React.createElement(MaterialIcon, { className: "ob-downloadable-files__download-icon" }, "download"))));
+    return (_jsx(Tooltip, { title: attachment.filename, arrow: true, children: _jsxs("a", { href: attachment.signedUrl, target: "_blank", rel: "noreferrer", download: true, className: clsx('ob-downloadable-files__item', className), children: [avatar, _jsxs("div", { className: "ob-downloadable-files__content", children: [_jsx("div", { className: "ob-downloadable-files__filename ob-downloadable-files__text", children: attachment.filename }), _jsx("div", { className: "ob-downloadable-files__filetype ob-downloadable-files__text", children: attachment.contentType.split('/')[1] || 'Unknown' })] }), _jsx(MaterialIcon, { className: "ob-downloadable-files__download-icon", children: "download" })] }) }));
 };
 /** Centers the PDF Download button */
 export const OnlyPDFDisplay = ({ children, className, }) => {
     const layout = useLayout();
-    return (React.createElement("div", { className: clsx('ob-downloadable-files__container', className) },
-        React.createElement(Grid, { container: true, spacing: 2, justifyContent: children.length === 1 ? 'center' : undefined }, children.map(({ node, key }) => (React.createElement(Grid, { item: true, xs: 12, sm: layout === 'GRID' ? 6 : 12, key: key }, node))))));
+    return (_jsx("div", { className: clsx('ob-downloadable-files__container', className), children: _jsx(Grid, { container: true, spacing: 2, justifyContent: children.length === 1 ? 'center' : undefined, children: children.map(({ node, key }) => (_jsx(Grid, { size: { xs: 12, sm: layout === 'GRID' ? 6 : 12 }, children: node }, key))) }) }));
 };
 //# sourceMappingURL=resource-components.js.map

package/dist/components/downloadable-files/resource-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"resource-components.js","sourceRoot":"","sources":["../../../src/components/downloadable-files/resource-components.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { Collapse, Grid, LinearProgress, Tooltip } from '@mui/material'\nimport MaterialIcon from '../MaterialIcon'\nimport { submissionService } from '@oneblink/apps'\nimport useLoadDataState from '../../hooks/useLoadDataState'\nimport OneBlinkAppsErrorOriginalMessage from '../renderer/OneBlinkAppsErrorOriginalMessage'\nimport clsx from 'clsx'\nimport { useLayout } from './LayoutProvider'\n\ntype Attachment = Awaited<\n  ReturnType<typeof submissionService.getPostSubmissionAttachments>\n>[number]\n\nexport const LoadAndDisplayAttachments = ({\n  pdfFileNodes,\n  formSubmissionResult,\n}: {\n  pdfFileNodes?: PDFFileNode[]\n  formSubmissionResult: submissionService.FormSubmissionResult\n}) => {\n  const loadAttachments = React.useCallback(\n    () => submissionService.getPostSubmissionAttachments(formSubmissionResult),\n    [formSubmissionResult],\n  )\n  const [attachmentsState] = useLoadDataState(loadAttachments)\n\n  return (\n    <>\n      <Collapse in={attachmentsState.status === 'LOADING'} unmountOnExit>\n        <div className=\"ob-downloadable-files__loading\">\n          <div className=\"ob-list__text-secondary mb-1 has-text-centered\">\n            Loading Attachments...\n          </div>\n          <LinearProgress className=\"ob-progress__downloadable-files\" />\n        </div>\n      </Collapse>\n      <Collapse in={attachmentsState.status === 'ERROR'} unmountOnExit>\n        {!!pdfFileNodes?.length && (\n          <>\n            <OnlyPDFDisplay className=\"ob-downloadable-files__error-pdf\">\n              {pdfFileNodes}\n            </OnlyPDFDisplay>\n          </>\n        )}\n\n        <div className=\"ob-downloadable-files__error has-text-centered\">\n          <MaterialIcon className=\"has-text-danger icon-large\">\n            error\n          </MaterialIcon>\n          <OneBlinkAppsErrorOriginalMessage\n            error={\n              attachmentsState.status === 'ERROR'\n                ? attachmentsState.error\n                : undefined\n            }\n          />\n        </div>\n      </Collapse>\n      <Collapse in={attachmentsState.status === 'SUCCESS'} unmountOnExit>\n        <DownloadableFilesDisplay\n          attachments={\n            attachmentsState.status === 'SUCCESS' ? attachmentsState.result : []\n          }\n          pdfFileNodes={pdfFileNodes}\n        />\n      </Collapse>\n    </>\n  )\n}\n\nexport type PDFFileNode = {\n  key: string\n  node: React.ReactNode\n}\n\ntype DownloadableFilesDisplayProps = {\n  attachments: Attachment[]\n  pdfFileNodes?: PDFFileNode[]\n}\nfunction DownloadableFilesDisplay({\n  attachments,\n  pdfFileNodes,\n}: DownloadableFilesDisplayProps) {\n  const layout = useLayout()\n\n  const totalToDisplay = React.useMemo(() => {\n    return attachments.length + (pdfFileNodes?.length ?? 0)\n  }, [attachments, pdfFileNodes])\n\n  return (\n    <>\n      <div className=\"ob-downloadable-files__container\">\n        <Grid\n          container\n          spacing={2}\n          justifyContent={totalToDisplay === 1 ? 'center' : undefined}\n        >\n          {pdfFileNodes &&\n            pdfFileNodes.map(({ node, key }) => (\n              <Grid item xs={12} sm={layout === 'GRID' ? 6 : 12} key={key}>\n                {node}\n              </Grid>\n            ))}\n          {attachments.map((attachment, index) => (\n            <Grid item xs={12} sm={layout === 'GRID' ? 6 : 12} key={index}>\n              <SingleFileDisplay attachment={attachment} />\n            </Grid>\n          ))}\n        </Grid>\n      </div>\n    </>\n  )\n}\n\nconst getFileTypeIcon = (type: string) => {\n  // Add other appropriate icons for file types here anytime\n  if (type.includes('doc')) {\n    return 'description'\n  }\n  return 'attach_file'\n}\n\nexport const SingleFileDisplay = ({\n  attachment,\n  className,\n}: {\n  attachment: Attachment\n  className?: string\n}) => {\n  const { avatar } = React.useMemo(() => {\n    const avatar = () => {\n      return attachment.contentType.includes('image') ? (\n        <img\n          src={attachment.signedUrl}\n          alt={attachment.filename}\n          className=\"ob-downloadable-files__thumbnail\"\n        />\n      ) : (\n        <MaterialIcon className=\"ob-downloadable-files__icon\">\n          {getFileTypeIcon(attachment.contentType)}\n        </MaterialIcon>\n      )\n    }\n\n    return { avatar: avatar() }\n  }, [attachment.filename, attachment.contentType, attachment.signedUrl])\n\n  return (\n    <Tooltip title={attachment.filename} arrow>\n      <a\n        href={attachment.signedUrl}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        download\n        className={clsx('ob-downloadable-files__item', className)}\n      >\n        {avatar}\n        <div className=\"ob-downloadable-files__content\">\n          <div className=\"ob-downloadable-files__filename ob-downloadable-files__text\">\n            {attachment.filename}\n          </div>\n          <div className=\"ob-downloadable-files__filetype ob-downloadable-files__text\">\n            {attachment.contentType.split('/')[1] || 'Unknown'}\n          </div>\n        </div>\n        <MaterialIcon className=\"ob-downloadable-files__download-icon\">\n          download\n        </MaterialIcon>\n      </a>\n    </Tooltip>\n  )\n}\n\n/** Centers the PDF Download button */\nexport const OnlyPDFDisplay = ({\n  children,\n  className,\n}: {\n  children: PDFFileNode[]\n  className?: string\n}) => {\n  const layout = useLayout()\n\n  return (\n    <div className={clsx('ob-downloadable-files__container', className)}>\n      <Grid\n        container\n        spacing={2}\n        justifyContent={children.length === 1 ? 'center' : undefined}\n      >\n        {children.map(({ node, key }) => (\n          <Grid item xs={12} sm={layout === 'GRID' ? 6 : 12} key={key}>\n            {node}\n          </Grid>\n        ))}\n      </Grid>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"resource-components.js","sourceRoot":"","sources":["../../../src/components/downloadable-files/resource-components.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { Collapse, Grid, LinearProgress, Tooltip } from '@mui/material'\nimport MaterialIcon from '../MaterialIcon'\nimport { submissionService } from '@oneblink/apps'\nimport useLoadDataState from '../../hooks/useLoadDataState'\nimport OneBlinkAppsErrorOriginalMessage from '../renderer/OneBlinkAppsErrorOriginalMessage'\nimport clsx from 'clsx'\nimport { useLayout } from './LayoutProvider'\n\ntype Attachment = Awaited<\n  ReturnType<typeof submissionService.getPostSubmissionAttachments>\n>[number]\n\nexport const LoadAndDisplayAttachments = ({\n  pdfFileNodes,\n  formSubmissionResult,\n}: {\n  pdfFileNodes?: PDFFileNode[]\n  formSubmissionResult: submissionService.FormSubmissionResult\n}) => {\n  const loadAttachments = React.useCallback(\n    () => submissionService.getPostSubmissionAttachments(formSubmissionResult),\n    [formSubmissionResult],\n  )\n  const [attachmentsState] = useLoadDataState(loadAttachments)\n\n  return (\n    <>\n      <Collapse in={attachmentsState.status === 'LOADING'} unmountOnExit>\n        <div className=\"ob-downloadable-files__loading\">\n          <div className=\"ob-list__text-secondary mb-1 has-text-centered\">\n            Loading Attachments...\n          </div>\n          <LinearProgress className=\"ob-progress__downloadable-files\" />\n        </div>\n      </Collapse>\n      <Collapse in={attachmentsState.status === 'ERROR'} unmountOnExit>\n        {!!pdfFileNodes?.length && (\n          <>\n            <OnlyPDFDisplay className=\"ob-downloadable-files__error-pdf\">\n              {pdfFileNodes}\n            </OnlyPDFDisplay>\n          </>\n        )}\n\n        <div className=\"ob-downloadable-files__error has-text-centered\">\n          <MaterialIcon className=\"has-text-danger icon-large\">\n            error\n          </MaterialIcon>\n          <OneBlinkAppsErrorOriginalMessage\n            error={\n              attachmentsState.status === 'ERROR'\n                ? attachmentsState.error\n                : undefined\n            }\n          />\n        </div>\n      </Collapse>\n      <Collapse in={attachmentsState.status === 'SUCCESS'} unmountOnExit>\n        <DownloadableFilesDisplay\n          attachments={\n            attachmentsState.status === 'SUCCESS' ? attachmentsState.result : []\n          }\n          pdfFileNodes={pdfFileNodes}\n        />\n      </Collapse>\n    </>\n  )\n}\n\nexport type PDFFileNode = {\n  key: string\n  node: React.ReactNode\n}\n\ntype DownloadableFilesDisplayProps = {\n  attachments: Attachment[]\n  pdfFileNodes?: PDFFileNode[]\n}\nfunction DownloadableFilesDisplay({\n  attachments,\n  pdfFileNodes,\n}: DownloadableFilesDisplayProps) {\n  const layout = useLayout()\n\n  const totalToDisplay = React.useMemo(() => {\n    return attachments.length + (pdfFileNodes?.length ?? 0)\n  }, [attachments, pdfFileNodes])\n\n  return (\n    <>\n      <div className=\"ob-downloadable-files__container\">\n        <Grid\n          container\n          spacing={2}\n          justifyContent={totalToDisplay === 1 ? 'center' : undefined}\n        >\n          {pdfFileNodes &&\n            pdfFileNodes.map(({ node, key }) => (\n              <Grid size={{ xs: 12, sm: layout === 'GRID' ? 6 : 12 }} key={key}>\n                {node}\n              </Grid>\n            ))}\n          {attachments.map((attachment, index) => (\n            <Grid size={{ xs: 12, sm: layout === 'GRID' ? 6 : 12 }} key={index}>\n              <SingleFileDisplay attachment={attachment} />\n            </Grid>\n          ))}\n        </Grid>\n      </div>\n    </>\n  )\n}\n\nconst getFileTypeIcon = (type: string) => {\n  // Add other appropriate icons for file types here anytime\n  if (type.includes('doc')) {\n    return 'description'\n  }\n  return 'attach_file'\n}\n\nexport const SingleFileDisplay = ({\n  attachment,\n  className,\n}: {\n  attachment: Attachment\n  className?: string\n}) => {\n  const { avatar } = React.useMemo(() => {\n    const avatar = () => {\n      return attachment.contentType.includes('image') ? (\n        <img\n          src={attachment.signedUrl}\n          alt={attachment.filename}\n          className=\"ob-downloadable-files__thumbnail\"\n        />\n      ) : (\n        <MaterialIcon className=\"ob-downloadable-files__icon\">\n          {getFileTypeIcon(attachment.contentType)}\n        </MaterialIcon>\n      )\n    }\n\n    return { avatar: avatar() }\n  }, [attachment.filename, attachment.contentType, attachment.signedUrl])\n\n  return (\n    <Tooltip title={attachment.filename} arrow>\n      <a\n        href={attachment.signedUrl}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        download\n        className={clsx('ob-downloadable-files__item', className)}\n      >\n        {avatar}\n        <div className=\"ob-downloadable-files__content\">\n          <div className=\"ob-downloadable-files__filename ob-downloadable-files__text\">\n            {attachment.filename}\n          </div>\n          <div className=\"ob-downloadable-files__filetype ob-downloadable-files__text\">\n            {attachment.contentType.split('/')[1] || 'Unknown'}\n          </div>\n        </div>\n        <MaterialIcon className=\"ob-downloadable-files__download-icon\">\n          download\n        </MaterialIcon>\n      </a>\n    </Tooltip>\n  )\n}\n\n/** Centers the PDF Download button */\nexport const OnlyPDFDisplay = ({\n  children,\n  className,\n}: {\n  children: PDFFileNode[]\n  className?: string\n}) => {\n  const layout = useLayout()\n\n  return (\n    <div className={clsx('ob-downloadable-files__container', className)}>\n      <Grid\n        container\n        spacing={2}\n        justifyContent={children.length === 1 ? 'center' : undefined}\n      >\n        {children.map(({ node, key }) => (\n          <Grid size={{ xs: 12, sm: layout === 'GRID' ? 6 : 12 }} key={key}>\n            {node}\n          </Grid>\n        ))}\n      </Grid>\n    </div>\n  )\n}\n"]}

package/dist/components/formStore/FormStoreTableProvider.d.ts

@@ -3,4 +3,4 @@ import { FormTypes } from '@oneblink/types';
 export declare function FormStoreTableProvider({ form, children, }: {
     form: FormTypes.Form;
     children: React.ReactNode;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/formStore/FormStoreTableProvider.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import querystring from 'query-string';
@@ -5,7 +6,6 @@ import { formStoreService } from '@oneblink/apps';
 import useInfiniteScrollDataLoad from '../../hooks/useInfiniteScrollDataLoad';
 import useFormStoreTable from './table/useFormStoreTable';
 import { Box, Button, Grid } from '@mui/material';
-import { LoadingButton } from '@mui/lab';
 import useSubmissionIdValidationMessage, { validateIsUUID, } from '../../hooks/useSubmissionIdIsValid';
 import ErrorMessage from '../messages/ErrorMessage';
 import LoadingWithMessage from '../LoadingWithMessage';
@@ -103,19 +103,9 @@ export function FormStoreTableProvider({ form, children, }) {
         form,
         onRefresh,
     });
-    return (React.createElement(FormStoreTableContext.Provider, { value: formStoreTable },
-        children,
-        formStoreTable.visibleColumns.length ? (React.createElement(React.Fragment, null, !formStoreRecords.length && !isLoading && !loadError && (React.createElement(NoResourcesYet, { IconComponent: FormStoreIcon, title: "No Records Found..." }, "There are no Submissions matching your filters.")))) : (React.createElement(NoResourcesYet, { IconComponent: (props) => (React.createElement(MaterialIcon, { ...props }, "settings")), title: "No Columns Visible", gutterBottom: true }, "It looks like you have hidden all of the available columns. Please enable at least one column to view submissions.")),
-        isLoading === 'INITIAL' && (React.createElement("div", { className: "ob-form-store-loading-initial" },
-            React.createElement(LoadingWithMessage, { message: "Loading initial records..." }))),
-        loadError && (React.createElement(React.Fragment, null,
-            React.createElement(ErrorMessage, { title: "Error Retrieving Submissions", gutterBottom: true, gutterTop: true }, loadError.message),
-            React.createElement(Grid, { container: true, justifyContent: "center" },
-                React.createElement(Button, { className: "ob-form-store-try-again-button", variant: "outlined", color: "primary", onClick: () => onTryAgain() }, "Try Again")))),
-        !!nextOffset && !loadError && isLoading !== 'INITIAL' && (React.createElement(Box, { padding: 4, className: "ob-form-store-load-more-button-container" },
-            React.createElement(Grid, { container: true, justifyContent: "center" },
-                React.createElement(LoadingButton, { className: "ob-form-store-load-more-button", variant: "outlined", color: "primary", onClick: () => onTryAgain(nextOffset), loading: isLoading === 'MORE', size: "large", loadingPosition: "start", startIcon: React.createElement(MaterialIcon, null, "read_more"), classes: {
-                        loadingIndicator: 'ob-form-store-loading-more-indicator',
-                    } }, "Load More"))))));
+    const visibleColumns = formStoreTable.getVisibleFlatColumns();
+    return (_jsxs(FormStoreTableContext.Provider, { value: formStoreTable, children: [children, (visibleColumns === null || visibleColumns === void 0 ? void 0 : visibleColumns.length) ? (_jsx(_Fragment, { children: !formStoreRecords.length && !isLoading && !loadError && (_jsx(NoResourcesYet, { IconComponent: FormStoreIcon, title: "No Records Found...", children: "There are no Submissions matching your filters." })) })) : (_jsx(NoResourcesYet, { IconComponent: (props) => (_jsx(MaterialIcon, { ...props, children: "settings" })), title: "No Columns Visible", gutterBottom: true, children: "It looks like you have hidden all of the available columns. Please enable at least one column to view submissions." })), isLoading === 'INITIAL' && (_jsx("div", { className: "ob-form-store-loading-initial", children: _jsx(LoadingWithMessage, { message: "Loading initial records..." }) })), loadError && (_jsxs(_Fragment, { children: [_jsx(ErrorMessage, { title: "Error Retrieving Submissions", gutterBottom: true, gutterTop: true, children: loadError.message }), _jsx(Grid, { container: true, justifyContent: "center", children: _jsx(Button, { className: "ob-form-store-try-again-button", variant: "outlined", color: "primary", onClick: () => onTryAgain(), children: "Try Again" }) })] })), !!nextOffset && !loadError && isLoading !== 'INITIAL' && (_jsx(Box, { padding: 4, className: "ob-form-store-load-more-button-container", children: _jsx(Grid, { container: true, justifyContent: "center", children: _jsx(Button, { className: "ob-form-store-load-more-button", variant: "outlined", color: "primary", onClick: () => onTryAgain(nextOffset), loading: isLoading === 'MORE', size: "large", loadingPosition: "start", startIcon: _jsx(MaterialIcon, { children: "read_more" }), classes: {
+                            loadingIndicator: 'ob-form-store-loading-more-indicator',
+                        }, children: "Load More" }) }) }))] }));
 }
 //# sourceMappingURL=FormStoreTableProvider.js.map