{"version":3,"sources":["app/Layout/FrontendLayout/components/LoginScreenCompanyLogo/index.tsx","app/Layout/AccountLayout/components/FooterContent.tsx","app/Layout/AccountLayout/components/AppStroreButton.tsx","app/Layout/AccountLayout/components/StoreButtons.tsx","app/Layout/AccountLayout/components/GetMobileApp.tsx","app/Layout/AccountLayout/index.tsx"],"names":["LoginScreenCompanyLogo","React","props","t","useTranslation","appSettings","useSelector","selectAppSettings","isLoading","selectLoading","undefined","customerLink","setCustomerLink","customerImg","setCustomerImg","LoginScreenCompanyLogoHeight","logoHeightSettings","setLogoHeight","logoHeight","isMobile","height","active","link","LoginScreenCompanyLogoLink","img","console","log","toRootedURL","href","aria-label","Avatar","variant","alt","translations","CompanyLogo","src","style","width","FooterSection","styled","theme","display","padding","justifyContent","alignItems","gap","FooterContent","useTheme","className","Copyright","disableVersionOnMobile","AppStoreButton","store","maxWidth","process","StoreButtonsRoot","StoreButtons","AppButtonsPanel","flexDirection","GetMobileApp","loginFooterApps","useMemo","LoginFooterApps","bold","size","color","bookitColors","base","white","AppAccountButtonsTitle","AccountRoot","boxShadow","breakpoints","down","overflowY","minWidth","flexShrink","alignSelf","background","transition","transitions","create","order","paddingTop","flex","AccountLayout","children","checkIsMobile","useIsMobile"],"mappings":"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","file":"static/js/103.eace939d.chunk.js","sourcesContent":["import { Avatar } from '@material-ui/core';\r\nimport { Link } from 'app/components/ExternalLink';\r\nimport { selectAppSettings, selectLoading } from 'app/slice/selectors';\r\nimport { translations } from 'locales/translations';\r\nimport * as React from 'react';\r\nimport { isMobile } from 'react-device-detect';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useSelector } from 'react-redux';\r\nimport { AppSettings } from 'types/AppSettings';\r\nimport { toRootedURL } from 'utils/url-utils';\r\n\r\nexport interface LoginScreenCompanyLogoProps {\r\n  height?: string | number;\r\n  isMobile?: boolean;\r\n}\r\n// const useStyles = makeStyles<Theme, LoginScreenCompanyLogoProps>(theme => ({\r\n//   root: {\r\n//     '&>img': {\r\n//       objectFit: 'contain',\r\n//       objectPosition: props =>\r\n//         props.isMobile !== undefined && props.isMobile ? 'left' : 'center',\r\n//     },\r\n//   },\r\n// }));\r\nexport const LoginScreenCompanyLogo = React.memo(\r\n  function LoginScreenCompanyLogo(props: LoginScreenCompanyLogoProps) {\r\n    const { t } = useTranslation();\r\n    const appSettings: AppSettings | null = useSelector(selectAppSettings);\r\n    const isLoading = useSelector(selectLoading);\r\n    // const classes = useStyles(props);\r\n    const [customerLink, setCustomerLink] = React.useState<string | undefined>(\r\n      undefined,\r\n    );\r\n    const [customerImg, setCustomerImg] = React.useState<string | undefined>(\r\n      undefined,\r\n    );\r\n    const [logoHeightSettings, setLogoHeight] = React.useState<\r\n      string | undefined\r\n    >(appSettings?.LoginScreenCompanyLogoHeight);\r\n    const logoHeight = React.useMemo(() => {\r\n      return isMobile ? '36' : logoHeightSettings ?? props.height ?? 40;\r\n    }, [logoHeightSettings, props.height]);\r\n    React.useEffect(() => {\r\n      let active = !isLoading;\r\n      if (active) {\r\n        let link = appSettings?.LoginScreenCompanyLogoLink;\r\n        let img = appSettings?.LoginScreenCompanyLogo;\r\n        let height = appSettings?.LoginScreenCompanyLogoHeight;\r\n        if (link !== undefined && link !== '') {\r\n          setCustomerLink(link);\r\n        }\r\n        if (img !== undefined && img !== '') {\r\n          setCustomerImg(img);\r\n          console.log(toRootedURL(img));\r\n        }\r\n        if (height !== undefined) {\r\n          setLogoHeight(height);\r\n        }\r\n      } else {\r\n        setCustomerLink(undefined);\r\n        setCustomerImg(undefined);\r\n      }\r\n      return () => {\r\n        active = false;\r\n      };\r\n    }, [appSettings, isLoading]);\r\n    return (\r\n      <Link\r\n        href={customerLink || 'https://bookit-lab.com'}\r\n        aria-label=\"customer logo\"\r\n      >\r\n        <Avatar\r\n          variant=\"square\"\r\n          alt={t(translations.CompanyLogo)}\r\n          src={toRootedURL(customerImg || '/ctl/DS/Default/logo.png')}\r\n          style={{\r\n            height: `${logoHeight}px`,\r\n            width: 'auto',\r\n          }}\r\n        />\r\n      </Link>\r\n    );\r\n  },\r\n);\r\n","import { useTheme } from '@material-ui/core';\r\nimport { Copyright } from 'app/components/Copyright';\r\nimport styled from 'styled-components';\r\n\r\nexport interface FooterContentProps {\r\n  isMobile?: boolean;\r\n}\r\nexport const FooterSection = styled('div')(({ theme }) => ({\r\n  '&.footerSection': {\r\n    display: 'flex',\r\n    width: '100%',\r\n    padding: '8px 16px 12px 16px',\r\n    justifyContent: 'center',\r\n    alignItems: 'flex-start',\r\n    gap: '10px',\r\n  },\r\n}));\r\nexport function FooterContent(props: FooterContentProps) {\r\n  const theme = useTheme();\r\n  return (\r\n    <FooterSection theme={theme} className={'footerSection'}>\r\n      <Copyright disableVersionOnMobile={props.isMobile} />\r\n    </FooterSection>\r\n  );\r\n}\r\n","import { Link } from 'app/components/ExternalLink';\r\n\r\nexport interface AppStoreButtonProps {\r\n  store: 'IOS' | 'Android';\r\n  height?: string | number;\r\n  width?: string | number;\r\n}\r\n\r\nexport function AppStoreButton(props: AppStoreButtonProps) {\r\n  const { store, height, width } = props;\r\n  const IOSLink = 'https://itunes.apple.com/ca/app/bookitlab/id707458905?mt=8';\r\n  const AndroidLink =\r\n    'https://play.google.com/store/apps/details?id=com.prog4biz.bookitlab';\r\n  return (\r\n    <Link href={store === 'IOS' ? IOSLink : AndroidLink}>\r\n      <img\r\n        style={{ height: height || '40px', maxWidth: width || '120px' }}\r\n        alt={\r\n          store === 'IOS' ? 'Get it on Apple Store' : 'Get it on Google Play'\r\n        }\r\n        src={`${process.env.PUBLIC_URL}${\r\n          store === 'IOS'\r\n            ? '/images/ios-app-store.png'\r\n            : '/images/android-app-store.png'\r\n        }`}\r\n      />\r\n    </Link>\r\n  );\r\n}\r\n","import styled from 'styled-components';\r\nimport { AppStoreButton } from './AppStroreButton';\r\nimport { useTheme } from '@material-ui/core';\r\n\r\nexport interface StoreButtonsProps {\r\n  height?: string | number;\r\n  width?: string | number;\r\n}\r\nexport const StoreButtonsRoot = styled('div')(({ theme }) => ({\r\n  '&.storeButtons': {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: '16px',\r\n  },\r\n}));\r\nexport function StoreButtons(props: StoreButtonsProps) {\r\n  const theme = useTheme();\r\n  return (\r\n    <StoreButtonsRoot className={'storeButtons'} theme={theme}>\r\n      <AppStoreButton\r\n        store=\"Android\"\r\n        height={props.height}\r\n        width={props.width}\r\n      />\r\n      <AppStoreButton store=\"IOS\" height={props.height} width={props.width} />\r\n    </StoreButtonsRoot>\r\n  );\r\n}\r\n","import styled from 'styled-components';\r\nimport { StoreButtons } from './StoreButtons';\r\nimport { translations } from 'locales/translations';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Body, Caption } from 'app/components/Typography';\r\nimport { bookitColors } from 'styles/colors/bookitColors';\r\nimport { useTheme } from '@material-ui/core';\r\nimport React from 'react';\r\n\r\nexport interface GetMobileAppProps {}\r\nexport const AppButtonsPanel = styled('div')(({ theme }) => ({\r\n  '&.appContainer': {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    alignItems: 'center',\r\n    gap: '14px',\r\n  },\r\n}));\r\nexport function GetMobileApp(props: GetMobileAppProps) {\r\n  const { t } = useTranslation();\r\n  const theme = useTheme();\r\n  const loginFooterApps = React.useMemo(() => {\r\n    return t(translations.LoginFooterApps);\r\n  }, [t]);\r\n  return (\r\n    <AppButtonsPanel className={'appContainer'} theme={theme}>\r\n      <Body bold size=\"small\" style={{ color: bookitColors.base.white }}>\r\n        {t(translations.AppAccountButtonsTitle)}\r\n      </Body>\r\n      <StoreButtons />\r\n      {!!loginFooterApps && loginFooterApps !== '' && (\r\n        <Caption bold style={{ color: bookitColors.base.white }}>\r\n          {t(translations.LoginFooterApps)}\r\n        </Caption>\r\n      )}\r\n    </AppButtonsPanel>\r\n    // <div className={classes.downloadApp}>\r\n    //   <div className={classes.downloadAppTitle}>\r\n    //     <Body bold size=\"small\" style={{ color: bookitColors.base.white }}>\r\n    //       {'Get the mobile App'}\r\n    //     </Body>\r\n    //   </div>\r\n    //   <StoreButtons />\r\n    //   <div className={classes.downloadAppFooter}>\r\n    //     <Caption bold style={{ color: bookitColors.base.white }}>\r\n    //       {t(translations.LoginFooterApps)}\r\n    //     </Caption>\r\n    //   </div>\r\n    // </div>\r\n  );\r\n}\r\n","/**\r\n *\r\n * AccountLayout\r\n *\r\n */\r\nimport { useTheme } from '@material-ui/core';\r\nimport { BookitlabLoginLogo } from 'app/components/BookitlabLogo';\r\nimport { useIsMobile } from 'app/hooks/useIsMobile';\r\nimport * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { bookitColors } from 'styles/colors/bookitColors';\r\nimport { LoginScreenCompanyLogo } from '../FrontendLayout/components/LoginScreenCompanyLogo';\r\nimport { FooterContent } from './components/FooterContent';\r\nimport { GetMobileApp } from './components/GetMobileApp';\r\nexport interface AccountLayoutProps {\r\n  children: React.ReactNode;\r\n}\r\nexport const AccountRoot = styled('div')(({ theme }) => ({\r\n  '&.accountRoot': {\r\n    display: 'flex',\r\n    boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.25)',\r\n    alignItems: 'flex-start',\r\n    //justifyContent: 'center',\r\n    flexDirection: 'row',\r\n    width: '100%',\r\n    height: '100dvh',\r\n    //overflowY: 'hidden',\r\n    [theme.breakpoints.down('sm')]: {\r\n      //height: '100%',\r\n      flexDirection: 'column',\r\n      justifyContent: 'flex-start',\r\n      overflowY: 'auto',\r\n    },\r\n    background: bookitColors.base.white,\r\n    '& .accountRightPanel': {\r\n      display: 'flex',\r\n      width: '420px',\r\n      minWidth: '360px',\r\n      padding: '64px',\r\n      flexDirection: 'column',\r\n      justifyContent: 'space-between',\r\n      alignItems: 'center',\r\n      flexShrink: 0,\r\n      alignSelf: 'stretch',\r\n      background: `url(${\r\n        process.env.PUBLIC_URL + '/images/login_right_bg.png'\r\n      })`,\r\n      transition: theme.transitions.create('width'),\r\n      [theme.breakpoints.down('sm')]: {\r\n        width: '100%',\r\n        order: 1,\r\n      },\r\n    },\r\n    '& .accountContainer': {\r\n      display: 'flex',\r\n      paddingTop: '40px',\r\n      flexDirection: 'column',\r\n      justifyContent: 'space-between',\r\n      alignItems: 'center',\r\n      flex: '1 0 0',\r\n      alignSelf: 'stretch',\r\n      background: bookitColors.base.white,\r\n      transition: theme.transitions.create('width'),\r\n      [theme.breakpoints.down('sm')]: {\r\n        order: 0,\r\n        //minHeight: '100%',\r\n      },\r\n      '& .accountMain': {\r\n        height: 'auto',\r\n        overflowY: 'auto',\r\n        // paddingTop: '40px',\r\n        [theme.breakpoints.down('sm')]: {\r\n          height: '100%',\r\n        },\r\n      },\r\n    },\r\n  },\r\n}));\r\nexport function AccountLayout(props: AccountLayoutProps) {\r\n  const { children } = props;\r\n  const { checkIsMobile } = useIsMobile();\r\n  const isMobile = checkIsMobile();\r\n  const theme = useTheme();\r\n  return (\r\n    <AccountRoot className={'accountRoot'} theme={theme}>\r\n      <div className={'accountRightPanel'}>\r\n        <BookitlabLoginLogo />\r\n        {/* <div className={classes.spacer}></div> */}\r\n        <GetMobileApp />\r\n      </div>\r\n      <div className={'accountContainer'}>\r\n        <LoginScreenCompanyLogo\r\n          isMobile={isMobile}\r\n          height={isMobile ? 36 : 40}\r\n        />\r\n        <main className={'accountMain'}>{children}</main>\r\n        <FooterContent isMobile={isMobile} />\r\n      </div>\r\n    </AccountRoot>\r\n  );\r\n}\r\n"],"sourceRoot":""}