{"version":3,"file":"index-6e0aae70.js","sources":["../../../FE_DEV/src/containers/NotificationModal/index.tsx"],"sourcesContent":["import {\n\tfaChevronLeft,\n\tfaChevronRight,\n} from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { ReactNode, useEffect, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport './index.scss'\nimport { LocalStorageHelper } from '@/utils/local-storage-helper'\nimport { IHeader } from '@/models/IHeader'\nimport { INotification } from '@/models/INotification'\n\ninterface ModalProps {\n\tisOpen: boolean\n\tonClose: () => void\n\tchildren: ReactNode\n}\n\nconst Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {\n\tif (!isOpen) return null\n\n\treturn createPortal(\n\t\t<section className=\"modal bg-white overflow-auto top-0 right-0\">\n\t\t\t<div className=\"overlay\"></div>\n\t\t\t<div className=\"flex content py-4 text-left px-6 w-full md:w-[480px]\">\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</section>,\n\t\tdocument.getElementById('modal-root') as HTMLDivElement,\n\t)\n}\n\ninterface NotificationProps {\n\tisMobile: boolean,\n\tbackToMenu: () => void\n}\n\nexport default function NotificaitonsModal({ isMobile, backToMenu }: NotificationProps) {\n\tconst [modalVisibility, setmodalVisibility] = useState<boolean>(false)\n\tconst [notifications, setNotifications] = useState<INotification[]>([])\n\tconst [loading, setLoading] = useState<boolean>(false)\n\n\tconst closeModal = () => {\n\t\tsetmodalVisibility(false)\n\t}\n\n\tconst backToMenuHandler = () => {\n\t\tbackToMenu();\n\t\tsetmodalVisibility(false)\n\t}\n\n\tconst onNotificationsOpen = async () => {\n\t\tsetmodalVisibility(true)\n\t\tconst header = LocalStorageHelper.getItem<IHeader>('header-info')\n\t\tif (header?.memberId) {\n\t\t\tconst notifications = LocalStorageHelper.getItem<INotification[]>(\n\t\t\t\t`notifications-${header.memberId}`,\n\t\t\t)\n\t\t\tif (notifications === undefined || notifications === null) {\n\t\t\t\tsetLoading(true)\n\t\t\t\tsetNotifications(\n\t\t\t\t\t[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tid: 1,\n\t\t\t\t\t\t\tname: 'TAKE TRAINING',\n\t\t\t\t\t\t\tdescription:\n\t\t\t\t\t\t\t\t'You’ve got outstanding training for working with children. ',\n\t\t\t\t\t\t\turl: '/',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tid: 2,\n\t\t\t\t\t\t\tname: 'FIND OUT MORE',\n\t\t\t\t\t\t\tdescription:\n\t\t\t\t\t\t\t\t'Arcu sit sit urna porttitor aliquam odio. Tempor viverra cursus laoreet mi. Enim amet dignissim.',\n\t\t\t\t\t\t\turl: '/',\n\t\t\t\t\t\t},\n\t\t\t\t\t], // get notifications from api\n\t\t\t\t)\n\t\t\t\tsetLoading(false)\n\t\t\t} else {\n\t\t\t\tsetNotifications(notifications ?? [])\n\t\t\t}\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tif (modalVisibility) {\n\t\t\tdocument.body.classList.add('overflow-hidden')\n\t\t} else {\n\t\t\tdocument.body.classList.remove('overflow-hidden')\n\t\t}\n\t}, [modalVisibility])\n\n\treturn (\n\t\t<div>\n\t\t\t{isMobile ? (\n\t\t\t\t<a\n\t\t\t\t\tonClick={onNotificationsOpen}\n\t\t\t\t\tclassName=\"flex\"\n\t\t\t\t>\n\t\t\t\t\t<svg\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tclassName=\"mr-2\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\td=\"M9.0185 4.66519C9.18499 3.16592 10.4564 2 12 2C13.5437 2 14.8151 3.16592 14.9816 4.6652C17.3554 5.78439 19 8.19905 19 11V14.1585C19 14.4321 19.1087 14.6945 19.3022 14.888L20.7071 16.2929C20.9931 16.5789 21.0787 17.009 20.9239 17.3827C20.7691 17.7564 20.4045 18 20 18L16 18C16 20.2091 14.2092 22 12 22C9.79089 22 8.00003 20.2091 8.00003 18L4.00003 18C3.59557 18 3.23093 17.7564 3.07615 17.3827C2.92137 17.009 3.00692 16.5789 3.29292 16.2929L4.69785 14.888C4.89133 14.6945 5.00003 14.4321 5.00003 14.1585V11C5.00003 8.19905 6.64464 5.78439 9.0185 4.66519ZM10 18C10 19.1046 10.8955 20 12 20C13.1046 20 14 19.1046 14 18H10ZM12 4C11.4477 4 11 4.44772 11 5V5.34142C11 5.76523 10.7329 6.14302 10.3333 6.28426C8.38994 6.97113 7.00003 8.82453 7.00003 11V14.1585C7.00003 14.8277 6.77872 15.4742 6.37664 16H17.6234C17.2213 15.4742 17 14.8277 17 14.1585V11C17 8.82453 15.6101 6.97113 13.6668 6.28426C13.2672 6.14302 13 5.76523 13 5.34142V5C13 4.44772 12.5523 4 12 4Z\"\n\t\t\t\t\t\t\tfill=\"#004A99\"\n\t\t\t\t\t\t></path>\n\t\t\t\t\t</svg>\n\t\t\t\t\tNotifications\n\t\t\t\t</a>\n\t\t\t) : (\n\t\t\t\t<button\n\t\t\t\t\tonClick={onNotificationsOpen}\n\t\t\t\t\tclassName=\"bg-sky-800 border border-sky-800 text-text-color-0 justify-center items-center gap-3 flex md:w-auto\"\n\t\t\t\t>\n\t\t\t\t\t<svg\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tclassName=\"mr-2\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\td=\"M9.0185 4.66519C9.18499 3.16592 10.4564 2 12 2C13.5437 2 14.8151 3.16592 14.9816 4.6652C17.3554 5.78439 19 8.19905 19 11V14.1585C19 14.4321 19.1087 14.6945 19.3022 14.888L20.7071 16.2929C20.9931 16.5789 21.0787 17.009 20.9239 17.3827C20.7691 17.7564 20.4045 18 20 18L16 18C16 20.2091 14.2092 22 12 22C9.79089 22 8.00003 20.2091 8.00003 18L4.00003 18C3.59557 18 3.23093 17.7564 3.07615 17.3827C2.92137 17.009 3.00692 16.5789 3.29292 16.2929L4.69785 14.888C4.89133 14.6945 5.00003 14.4321 5.00003 14.1585V11C5.00003 8.19905 6.64464 5.78439 9.0185 4.66519ZM10 18C10 19.1046 10.8955 20 12 20C13.1046 20 14 19.1046 14 18H10ZM12 4C11.4477 4 11 4.44772 11 5V5.34142C11 5.76523 10.7329 6.14302 10.3333 6.28426C8.38994 6.97113 7.00003 8.82453 7.00003 11V14.1585C7.00003 14.8277 6.77872 15.4742 6.37664 16H17.6234C17.2213 15.4742 17 14.8277 17 14.1585V11C17 8.82453 15.6101 6.97113 13.6668 6.28426C13.2672 6.14302 13 5.76523 13 5.34142V5C13 4.44772 12.5523 4 12 4Z\"\n\t\t\t\t\t\t\tfill=\"#fff\"\n\t\t\t\t\t\t></path>\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t)}\n\t\t\t<Modal isOpen={modalVisibility} onClose={closeModal}>\n\t\t\t\t<div className=\"w-full\">\n\t\t\t\t\t<div className=\"flex-col\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"close absolute right-0 cursor-pointer p-4 top-1 mt\"\n\t\t\t\t\t\t\tonClick={closeModal}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tclassName=\"fill-current h-6 w-6 text-black\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 20 20\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path d=\"M14.348 5.652a.5.5 0 10-.707-.707L10 9.293 5.359 4.652a.5.5 0 10-.707.707L9.293 10l-4.648 4.641a.5.5 0 00.707.707L10 10.707l4.641 4.648a.498.498 0 00.707 0 .5.5 0 000-.707L10.707 10l4.641-4.648z\" />\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t<button onClick={backToMenuHandler} className=\"flex md:hidden py-5\">\n\t\t\t\t\t\t\t<FontAwesomeIcon\n\t\t\t\t\t\t\t\ticon={faChevronLeft}\n\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t'w-[14px] h-[14px] text-action-secondary-120 pt-1'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span className=\"font-bold text-action-secondary-120 ml-2\">\n\t\t\t\t\t\t\t\tBACK TO MENU\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<div className=\"flex text-sm lg:text-lg text-action-primary-blue-100 pb-4 font-bold pointer-events-auto\">\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\t\tclassName=\"mr-2\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\td=\"M9.0185 4.66519C9.18499 3.16592 10.4564 2 12 2C13.5437 2 14.8151 3.16592 14.9816 4.6652C17.3554 5.78439 19 8.19905 19 11V14.1585C19 14.4321 19.1087 14.6945 19.3022 14.888L20.7071 16.2929C20.9931 16.5789 21.0787 17.009 20.9239 17.3827C20.7691 17.7564 20.4045 18 20 18L16 18C16 20.2091 14.2092 22 12 22C9.79089 22 8.00003 20.2091 8.00003 18L4.00003 18C3.59557 18 3.23093 17.7564 3.07615 17.3827C2.92137 17.009 3.00692 16.5789 3.29292 16.2929L4.69785 14.888C4.89133 14.6945 5.00003 14.4321 5.00003 14.1585V11C5.00003 8.19905 6.64464 5.78439 9.0185 4.66519ZM10 18C10 19.1046 10.8955 20 12 20C13.1046 20 14 19.1046 14 18H10ZM12 4C11.4477 4 11 4.44772 11 5V5.34142C11 5.76523 10.7329 6.14302 10.3333 6.28426C8.38994 6.97113 7.00003 8.82453 7.00003 11V14.1585C7.00003 14.8277 6.77872 15.4742 6.37664 16H17.6234C17.2213 15.4742 17 14.8277 17 14.1585V11C17 8.82453 15.6101 6.97113 13.6668 6.28426C13.2672 6.14302 13 5.76523 13 5.34142V5C13 4.44772 12.5523 4 12 4Z\"\n\t\t\t\t\t\t\t\t\tfill=\"#004A99\"\n\t\t\t\t\t\t\t\t></path>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<p className=\"font-bold text-lg\">Notifications</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{loading && (\n\t\t\t\t\t\t\t<div className=\"text-stone-700 text-base mt-3\">\n\t\t\t\t\t\t\t\tLoading...\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!loading &&\n\t\t\t\t\t\t\tnotifications &&\n\t\t\t\t\t\t\tnotifications?.map((notification) => (\n\t\t\t\t\t\t\t\t<span key={notification.id}>\n\t\t\t\t\t\t\t\t\t<hr className=\"mb-1 bg-border/40 h-0.5 border-none\"></hr>\n\t\t\t\t\t\t\t\t\t<div className=\"flex gap-4 py-1\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"mb-4 w-full text-stone-700 text-base mt-3\">\n\t\t\t\t\t\t\t\t\t\t\t<p>{notification.description}</p>\n\t\t\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\t\t\thref={notification.url}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex gap-2\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"font-bold\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{notification.name}\n\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t<FontAwesomeIcon\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon={faChevronRight}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'w-[14px] h-[14px] text-action-secondary-120 pt-1'\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t{!loading && notifications?.length == 0 && (\n\t\t\t\t\t\t\t<div className=\"text-stone-700 text-base mt-3\">\n\t\t\t\t\t\t\t\tNo notifications\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Modal>\n\t\t</div>\n\t)\n}\n"],"names":["Modal","isOpen","onClose","children","createPortal","jsxs","jsx","NotificaitonsModal","isMobile","backToMenu","modalVisibility","setmodalVisibility","useState","notifications","setNotifications","loading","setLoading","closeModal","backToMenuHandler","onNotificationsOpen","header","LocalStorageHelper","useEffect","FontAwesomeIcon","faChevronLeft","notification","faChevronRight"],"mappings":"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"}