{"version":3,"sources":["components/IdleTimeOutModal.tsx"],"names":["IdleModal","modalIsOpen","closeModal","useAuth","logout","manualCheck","useState","transition","setTransition","useCountdownTimer","timer","onExpire","setTimeout","toast","warn","position","hideProgressBar","pauseOnHover","draggable","onReset","start","countdown","reset","refresh","useCallback","afterOpenModal","isOpen","onAfterOpen","onRequestClose","contentLabel","className","base","afterOpen","beforeClose","overlayClassName","clsx","fill","viewBox","stroke","strokeLinecap","strokeLinejoin","strokeWidth","d","onClick","aria-label","aria-hidden","millisToMinutesAndSeconds","kind"],"mappings":"6RAae,SAASA,EAAT,GAAmG,IAA9EC,EAA6E,EAA7EA,YAAaC,EAAgE,EAAhEA,WAAgE,EAC/EC,cAAxBC,EADuG,EACvGA,OAAQC,EAD+F,EAC/FA,YAD+F,EAG3EC,oBAAS,GAHkE,mBAGxGC,EAHwG,KAG5FC,EAH4F,OAI3EC,4BAAkB,CACpDC,MAHY,IAIZC,SAAU,WACRH,GAAc,GAEdI,YAAW,WACTV,IACAW,IAAMC,KAAK,2BAA4B,CACrCC,SAAU,aACVC,iBAAiB,EACjBC,cAAc,EACdC,WAAW,IAEbd,GAAO,KACN,MAELe,QAAS,WACPd,IACAH,OAlBIkB,EAJuG,EAIvGA,MAAOC,EAJgG,EAIhGA,UAAWC,EAJqF,EAIrFA,MAsBpBC,EAAUC,uBAAY,WAC1BhB,GAAc,GAEdI,YAAW,WACTU,MACC,OACF,CAACA,IAEEG,EAAiBD,uBAAY,WACjCJ,IACAZ,GAAc,KACb,CAACY,IAQJ,OACE,cAAC,IAAD,CACEM,OAAQzB,EACR0B,YAAaF,EACbG,eAAgBL,EAChBM,aAAa,yBACbC,UAZiB,CACnBC,KAAM,4PACNC,UAAW,8DACXC,YAAa,wDAUXC,iBAAkBC,kBAChB5B,EAAa,mCAAqC,kCAClD,gGARJ,SAWE,sBAAKuB,UAAU,aAAf,UACE,sBAAKA,UAAU,uGAAf,UACE,sBAAKA,UAAU,0BAAf,UACE,qBAAKA,UAAU,mHAAf,SACE,qBAAKA,UAAU,uBAAuBM,KAAK,OAAOC,QAAQ,YAAYC,OAAO,eAA7E,SACE,sBACEC,cAAc,QACdC,eAAe,QACfC,YAAY,IACZC,EAAE,6IAIR,qBAAKZ,UAAU,gDAAf,SACE,oBAAIA,UAAU,0BAAd,6CAGJ,qBAAKA,UAAU,iCAAf,SACE,wBAAQA,UAAU,mBAAmBa,QAASpB,EAASqB,aAAW,mBAAlE,SACE,cAAC,YAAD,CAAWd,UAAU,yBAAyBe,eAAA,WAKpD,sBAAKf,UAAU,uEAAf,UACE,oBAAGA,UAAU,kCAAb,uCAC6BgB,oCAA0BzB,GADvD,eAGA,mBAAGS,UAAU,kCAAb,kDAGF,sBAAKA,UAAU,6FAAf,UACE,sBAAMA,UAAU,6DAAhB,SACE,cAAC,IAAD,CAAQiB,KAAK,UAAUJ,QAASpB,EAAhC,iCAIF,sBAAMO,UAAU,kEAAhB,SACE,eAAC,IAAD,CAAQa,QAAS,kBAAMvC,KAAU2C,KAAK,SAAtC,0BACgBD,oCAA0BzB,GAD1C","file":"static/js/3.c7d7757f.chunk.js","sourcesContent":["import clsx from 'clsx';\nimport React, { useState, useCallback } from 'react';\nimport Modal from 'react-modal';\nimport { toast } from 'react-toastify';\n\nimport { CloseIcon } from '@td-client-frontend/icons';\nimport { useCountdownTimer, millisToMinutesAndSeconds } from '@td-client-frontend/common';\n\nimport { ButtonDDf as Button } from '../components/Button';\nimport { useAuth } from '../context/AuthContext';\n\n// TODO: make this modal reusable for other functions (ie: take styling out and put in a base component)\n\nexport default function IdleModal({ modalIsOpen, closeModal }: { modalIsOpen: boolean; closeModal: () => void }) {\n  const { logout, manualCheck } = useAuth();\n  const timer = 10000;\n  const [transition, setTransition] = useState(false);\n  const { start, countdown, reset } = useCountdownTimer({\n    timer,\n    onExpire: () => {\n      setTransition(false);\n\n      setTimeout(() => {\n        closeModal();\n        toast.warn('You have been logged out', {\n          position: 'top-center',\n          hideProgressBar: true,\n          pauseOnHover: true,\n          draggable: true\n        });\n        logout(true);\n      }, 300);\n    },\n    onReset: () => {\n      manualCheck();\n      closeModal();\n    }\n  });\n\n  const refresh = useCallback(() => {\n    setTransition(false);\n\n    setTimeout(() => {\n      reset();\n    }, 300);\n  }, [reset]);\n\n  const afterOpenModal = useCallback(() => {\n    start();\n    setTransition(true);\n  }, [start]);\n\n  const customStyles = {\n    base: 'absolute inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full ease-out duration-300 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95 outline-none',\n    afterOpen: 'opacity-100 translate-y-0 sm:scale-100 ease-in duration-200',\n    beforeClose: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'\n  };\n\n  return (\n    <Modal\n      isOpen={modalIsOpen}\n      onAfterOpen={afterOpenModal}\n      onRequestClose={refresh}\n      contentLabel=\"Session Expiring Modal\"\n      className={customStyles}\n      overlayClassName={clsx(\n        transition ? 'opacity-100 ease-in duration-200' : 'opacity-0 ease-out duration-300',\n        'z-50 flex justify-center items-center fixed top-0 bottom-0 left-0 right-0 inset-0 overlay-bg'\n      )}\n    >\n      <div className=\"font-effra\">\n        <div className=\"justify-between px-4 py-2 bg-white sm:px-6 sm:py-4 border-b-1 border-gray-20 sm:flex sm:items-center\">\n          <div className=\"sm:flex sm:items-center\">\n            <div className=\"flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-red-100 rounded-full sm:mx-0 sm:h-10 sm:w-10\">\n              <svg className=\"w-6 h-6 text-red-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth=\"2\"\n                  d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                />\n              </svg>\n            </div>\n            <div className=\"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left\">\n              <h2 className=\"leading-6 text-gray-900\">Session is about to expire</h2>\n            </div>\n          </div>\n          <div className=\"hidden sm:flex sm:items-center\">\n            <button className=\"text-primary-600\" onClick={refresh} aria-label=\"Close Idle Modal\">\n              <CloseIcon className=\"w-10 h-10 fill-current\" aria-hidden />\n            </button>\n          </div>\n        </div>\n\n        <div className=\"px-4 py-4 space-y-2 text-center bg-white sm:p-8 sm:pt-4 sm:text-left\">\n          <p className=\"text-sm leading-5 text-gray-500\">\n            You will be logged out in {millisToMinutesAndSeconds(countdown)} seconds.\n          </p>\n          <p className=\"text-sm leading-5 text-gray-500\">Would you like to stay logged in?</p>\n        </div>\n        {/* Footer */}\n        <div className=\"px-4 py-3 sm:py-4 bg-gray-10 sm:px-6 sm:flex sm:flex-row-reverse border-t-1 border-gray-20\">\n          <span className=\"flex w-full text-sm rounded-md shadow-sm sm:ml-3 sm:w-auto\">\n            <Button kind=\"primary\" onClick={refresh}>\n              Keep me signed in\n            </Button>\n          </span>\n          <span className=\"flex w-full mt-3 text-sm rounded-md shadow-sm sm:mt-0 sm:w-auto\">\n            <Button onClick={() => logout()} kind=\"danger\">\n              Sign me out ({millisToMinutesAndSeconds(countdown)})\n            </Button>\n          </span>\n        </div>\n      </div>\n    </Modal>\n  );\n}\n"],"sourceRoot":""}