\n \n );\n};\n\nexport const getStaticProps: GetStaticProps = async ({ locale }) => {\n const allChaptersData = await getAllChaptersData(locale);\n\n return {\n props: {\n chaptersData: allChaptersData,\n },\n };\n};\n\nexport default withAuth(NotificationSettingsPage);\n","import * as Sentry from '@sentry/nextjs';\nimport * as serverComponentModule from '__SENTRY_WRAPPING_TARGET_FILE__.cjs';\nexport * from '__SENTRY_WRAPPING_TARGET_FILE__.cjs';\n\n/*\n * This file is a template for the code which will be substituted when our webpack loader handles non-API files in the\n * `pages/` directory.\n *\n * We use `__SENTRY_WRAPPING_TARGET_FILE__.cjs` as a placeholder for the path to the file being wrapped. Because it's not a real package,\n * this causes both TS and ESLint to complain, hence the pragma comments below.\n */\n\nconst userPageModule = serverComponentModule ;\n\nconst pageComponent = userPageModule ? userPageModule.default : undefined;\n\nconst origGetInitialProps = pageComponent ? pageComponent.getInitialProps : undefined;\nconst origGetStaticProps = userPageModule ? userPageModule.getStaticProps : undefined;\nconst origGetServerSideProps = userPageModule ? userPageModule.getServerSideProps : undefined;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst getInitialPropsWrappers = {\n '/_app': Sentry.wrapAppGetInitialPropsWithSentry,\n '/_document': Sentry.wrapDocumentGetInitialPropsWithSentry,\n '/_error': Sentry.wrapErrorGetInitialPropsWithSentry,\n};\n\nconst getInitialPropsWrapper = getInitialPropsWrappers['/notification-settings'] || Sentry.wrapGetInitialPropsWithSentry;\n\nif (pageComponent && typeof origGetInitialProps === 'function') {\n pageComponent.getInitialProps = getInitialPropsWrapper(origGetInitialProps) ;\n}\n\nconst getStaticProps =\n typeof origGetStaticProps === 'function'\n ? Sentry.wrapGetStaticPropsWithSentry(origGetStaticProps, '/notification-settings')\n : undefined;\nconst getServerSideProps =\n typeof origGetServerSideProps === 'function'\n ? Sentry.wrapGetServerSidePropsWithSentry(origGetServerSideProps, '/notification-settings')\n : undefined;\n\nconst pageWrapperTemplate = pageComponent ? Sentry.wrapPageComponentWithSentry(pageComponent ) : pageComponent;\n\nexport { pageWrapperTemplate as default, getServerSideProps, getStaticProps };\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nvar SvgChevronDown = function SvgChevronDown(props) {\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 15,\n height: 15,\n viewBox: \"0 0 15 15\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.135 6.158a.5.5 0 0 1 .707-.023L7.5 9.565l3.658-3.43a.5.5 0 0 1 .684.73l-4 3.75a.5.5 0 0 1-.684 0l-4-3.75a.5.5 0 0 1-.023-.707Z\",\n fill: \"currentColor\",\n fillRule: \"evenodd\",\n clipRule: \"evenodd\"\n })));\n};\nexport default SvgChevronDown;","// Exports\nmodule.exports = {\n\t\"container\": \"CollapsibleWorkflowSettings_container__vrNoK\",\n\t\"workflowName\": \"CollapsibleWorkflowSettings_workflowName__0RkJz\",\n\t\"workflowChannels\": \"CollapsibleWorkflowSettings_workflowChannels__mIy5l\"\n};\n","// Exports\nmodule.exports = {\n\t\"channelsContainer\": \"FieldsetContainer_channelsContainer___vj9c\"\n};\n","// Exports\nmodule.exports = {\n\t\"row\": \"PreferenceSettingsToggles_row__ZKxQT\"\n};\n","// Exports\nmodule.exports = {\n\t\"container\": \"Tabs_container__s7UYm\",\n\t\"header\": \"Tabs_header__ENuIE\",\n\t\"titleContainer\": \"Tabs_titleContainer__VlDsW\",\n\t\"loadingContainer\": \"Tabs_loadingContainer__Ewtc2\"\n};\n","// Exports\nmodule.exports = {\n\t\"header\": \"Collapsible_header__CmhJq\",\n\t\"headerLeft\": \"Collapsible_headerLeft__Xh00n\",\n\t\"prefixContainer\": \"Collapsible_prefixContainer__AVHUT\",\n\t\"prefixRotated\": \"Collapsible_prefixRotated__bjKLn\",\n\t\"suffixContainer\": \"Collapsible_suffixContainer__uZ1IW\"\n};\n","// Exports\nmodule.exports = {\n\t\"container\": \"Pill_container__FoIEg\",\n\t\"small\": \"Pill_small__zCILo\"\n};\n","// Exports\nmodule.exports = {\n\t\"root\": \"Toggle_root__H_bcP\",\n\t\"thumb\": \"Toggle_thumb__6mKWE\",\n\t\"label\": \"Toggle_label__FQD4J\",\n\t\"container\": \"Toggle_container__Hmm6V\"\n};\n","// Exports\nmodule.exports = {\n\t\"pageContainer\": \"index_pageContainer__Pxtn3\",\n\t\"loadingContainer\": \"index_loadingContainer__WEZFc\",\n\t\"flow\": \"index_flow__rCTR5\",\n\t\"flowItem\": \"index_flowItem__GnXWz\",\n\t\"additionalVerticalGap\": \"index_additionalVerticalGap__nzYz6\",\n\t\"fullWidth\": \"index_fullWidth__1n4ux\"\n};\n","/* eslint-disable max-lines */\nimport { useContext, createContext, useMemo } from 'react';\n\nimport useFetchNotifications from '@/components/Notifications/hooks/useFetchNotifications';\nimport { HeadlessServiceProvider } from '@/components/Notifications/hooks/useHeadlessService';\nimport useInitializeUnseenCount from '@/components/Notifications/hooks/useInitializeUnseenCount';\n\ntype NotificationContextType = {\n fetchNotifications: ReturnType;\n};\n\nconst NotificationContext = createContext({} as NotificationContextType);\n\nconst NotificationsProviderInner = ({ children }: { children: React.ReactNode }) => {\n // fetch initial unseen count and listen to its changes\n useInitializeUnseenCount();\n\n const fetchNotifications = useFetchNotifications();\n\n const value = useMemo(\n () => ({\n fetchNotifications,\n }),\n [fetchNotifications],\n );\n\n return {children};\n};\n\n// eslint-disable-next-line react/no-multi-comp\nexport const NotificationsProvider = ({ children }: { children: React.ReactNode }) => {\n return (\n \n {children}\n \n );\n};\n\nexport const useNotifications = () => useContext(NotificationContext);\n","/* eslint-disable no-underscore-dangle */\nimport React, { useMemo, useState } from 'react';\n\nimport { ChannelTypeEnum, IUserPreferenceSettings } from '@novu/headless';\nimport useTranslation from 'next-translate/useTranslation';\n\nimport styles from './CollapsibleWorkflowSettings.module.scss';\n\nimport useUpdateUserPreferences from '@/components/Notifications/hooks/useUpdateUserPreferences';\nimport PreferenceSettingsToggles from '@/components/Notifications/NotificationSettings/Tabs/PreferenceSettingsToggles';\nimport Collapsible, { CollapsibleDirection } from '@/dls/Collapsible/Collapsible';\nimport ChevronDownIcon from '@/icons/chevron-down.svg';\nimport { logEvent, logValueChange } from '@/utils/eventLogger';\n\ntype Props = {\n preference: IUserPreferenceSettings;\n};\n\nconst CollapsibleWorkflowSettings: React.FC = ({ preference }) => {\n const { t } = useTranslation('notification-settings');\n const { mutate: UpdateUserPreferences, isMutating } = useUpdateUserPreferences(\n // eslint-disable-next-line no-underscore-dangle\n preference.template._id,\n );\n // we need a local state to handle UI updates when the user changes one of the settings since the toggles are controlled\n const [preferenceState, setPreferenceState] = useState(preference);\n const [mutatingChannel, setMutatingChannel] = useState();\n\n const onOpenChange = (isOpen: boolean) => {\n if (isOpen) {\n logEvent('notif_workflow_settings_drawer_opened');\n } else {\n logEvent('notif_workflow_settings_drawer_closed');\n }\n };\n\n const onToggle = (isChecked: boolean, channel?: ChannelTypeEnum) => {\n setMutatingChannel(channel);\n logValueChange('notif_workflow_settings', !isChecked, isChecked, {\n channel,\n });\n UpdateUserPreferences(isChecked, channel, () => {\n setPreferenceState((prev) => {\n const newState = { ...prev };\n newState.preference.channels[channel] = isChecked;\n return newState;\n });\n });\n };\n\n const workflowChannels = useMemo(\n () =>\n // eslint-disable-next-line unicorn/no-array-reduce\n Object.keys(preferenceState.preference.channels).reduce((acc, currentValue) => {\n if (!acc) return t(`channels.${currentValue}`);\n return `${acc}, ${t(`channels.${currentValue}`)}`;\n }, ''),\n [preferenceState.preference.channels, t],\n );\n\n return (\n
\n \n
{preferenceState.template.name}
\n
{workflowChannels}
\n
\n }\n prefix={}\n shouldRotatePrefixOnToggle\n onOpenChange={onOpenChange}\n direction={CollapsibleDirection.Right}\n >\n {({ isOpen: isOpenRenderProp }) => {\n if (!isOpenRenderProp) return null;\n return (\n \n );\n }}\n \n \n );\n};\n\nexport default CollapsibleWorkflowSettings;\n","/* eslint-disable no-underscore-dangle */\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport { IUserPreferenceSettings } from '@novu/headless';\nimport groupBy from 'lodash/groupBy';\nimport useTranslation from 'next-translate/useTranslation';\n\nimport parentStyles from '../Tabs.module.scss';\n\nimport CollapsibleWorkflowSettings from './CollapsibleWorkflowSettings';\n\nimport useFetchUserPreferences from '@/components/Notifications/hooks/useFetchUserPreferences';\nimport { HeadlessServiceStatus } from '@/components/Notifications/hooks/useHeadlessService';\nimport FieldsetContainer from '@/components/Notifications/NotificationSettings/Tabs/FieldsetContainer';\nimport Pill, { PillSize } from '@/dls/Pill';\nimport Spinner, { SpinnerSize } from '@/dls/Spinner/Spinner';\nimport Error from '@/pages/_error';\n\nconst MARKETING_TAG = 'marketing';\n\nconst CategoriesSettingsTab = () => {\n const { t } = useTranslation('notification-settings');\n const {\n mutate,\n isMutating: isFetchingUserPreferences,\n error,\n userPreferences,\n status,\n } = useFetchUserPreferences();\n // we need a local state to handle UI updates when the user changes one of the settings since the toggles are controlled\n const [preferences, setPreferences] = useState(\n userPreferences as IUserPreferenceSettings[],\n );\n\n /**\n * Group the preferences by tags. We filter out:\n *\n * 1. critical workflows since they are cannot be skipped.\n * 2. preferences that don't have tags since they cannot be categorized.\n * 3. non-marketing emails\n */\n const groupByTags = useMemo(\n () =>\n groupBy(\n preferences?.filter(\n (preference) =>\n preference.template.critical === false &&\n !!preference.template.tags.length &&\n !preference.template.tags.includes(MARKETING_TAG),\n ),\n (preference) => preference.template.tags,\n ),\n [preferences],\n );\n\n useEffect(() => {\n setPreferences(userPreferences as IUserPreferenceSettings[]);\n }, [userPreferences]);\n\n useEffect(() => {\n mutate(false);\n }, [mutate]);\n\n const isLoading = status === HeadlessServiceStatus.INITIALIZING || isFetchingUserPreferences;\n if (isLoading) {\n return (\n
\n \n
\n );\n }\n const hasError = status === HeadlessServiceStatus.ERROR || error;\n if (hasError) {\n return (\n
\n \n
\n );\n }\n\n // if it's loading or there's an error, we don't want to render anything\n if (!preferences || preferences.length === 0) {\n return null;\n }\n\n return (\n <>\n {Object.keys(groupByTags).map((tag) => {\n const tagPreferences = groupByTags[tag];\n return (\n