react-device-detect#isAndroid JavaScript Examples

DownloadContainer = props => {
  const [device, setDevice] = React.useState('')
  const { appExtensions } = props
  React.useEffect(() => {
    if (isMobile) {
      if (isAndroid) {
        setDevice('android')
      } else if (isIOS) {
        setDevice('ios')
      } else {
        setDevice('browser')
      }
    } else {
      setDevice('browser')
    }
  }, [])
  if (isEmpty(appExtensions)) return null
  const isSSR = typeof window === 'undefined'
  const tabs = Object.keys(appExtensions).map(item => ({
    label: appExtensions[item]['label'],
    id: item,
    content: !isSSR && (
      <React.Suspense fallback={<Loading />}>
        <TabContentDownload {...appExtensions[item]} id={item} />
      </React.Suspense>
    ),
  }))

  return (
    <Container>
      <ContentWrapper>
        {!isSSR && device ? (
          <React.Suspense fallback={<div />}>
            <TabWrapper tabs={tabs} activeTabDefault={device}></TabWrapper>
          </React.Suspense>
        ) : null}
      </ContentWrapper>
    </Container>
  )
}

export default function AddToHomeScreenModal() {
  const intl = useIntl();
  const [modalShow, setModalShow] = useState(true);

  const handleOnCloseButtonClick = () => {
    setModalShow(false);
  };

  const renderInThisDevice =
    (process.env.REACT_APP_ADD_TO_HOME_SCREEN_MODAL_ANDROID === 'true' &&
      isAndroid) ||
    (process.env.REACT_APP_ADD_TO_HOME_SCREEN_MODAL_IOS === 'true' &&
      (isMobile || isIPad13));

  const shouldRender = renderInThisDevice && modalShow && !isInStandaloneMode();

  //TODO Add time for modal show again

  return (
    <div>
      {shouldRender && (
        <Dialog fullScreen open={modalShow} className="add-to-home-screen">
          <div className="logo">
            <img src={logo} alt="logo" />
          </div>
          <h3 className="flex-column perfect-center">
            {isAndroid && intl.formatMessage('add-to-home.android.title')}
            {(isIOS || isIPad13) && intl.formatMessage('add-to-home.ios.title')}
          </h3>
          <Paper className="steps flex-column perfect-center">
            <span>
              {(isIOS || isIPad13) &&
                intl.formatMessage('add-to-home.ios.step1.first')}
              {(isIOS || isIPad13) && (
                <img className="share-icon" src={ShareIcon} alt="Share" />
              )}
              {isAndroid &&
                intl.formatMessage('add-to-home.android.step1.first')}
              {isAndroid && (
                <img
                  className="chrome-menu"
                  src={AndroidChromeMenu}
                  alt="Menu"
                />
              )}
              {intl.formatMessage('add-to-home.ios.step1.end')}
            </span>
            <span>
              {intl.formatMessage('add-to-home.step2.first')}
              {(isIOS || isIPad13) && (
                <img
                  className="add-to-home-screen-icon"
                  src={AddToHomeScreenIcon}
                  alt="Add To Home Screen"
                />
              )}
              {isAndroid && (
                <span className="add-to-home-screen-icon">
                  {intl.formatMessage(
                    'add-to-home.android.step2.add-to-home-screen'
                  )}
                </span>
              )}
              {intl.formatMessage('add-to-home.step2.end')}
            </span>
            <span>{intl.formatMessage('add-to-home.step3.first')}</span>
          </Paper>
          <Button
            variant="contained"
            color="primary"
            onClick={handleOnCloseButtonClick}
          >
            {intl.formatMessage('add-to-home.add-later')}
          </Button>
        </Dialog>
      )}
    </div>
  );
}

CTA = props => {
  const {
    link: linkDefault,
    text: textDefault,
    align = 'left',
    newTab,
    iconConfig,
    color,
    button = false,
    showRightArrow = false,
    showLeftArrow = false,
    typeLayout = '',
    buttonSize,
    customClick,
    buttonDisplay,
    fontSize,
    buttonGradient,
    downloadBrowsers,
    eventCategory,
    eventLabel,
    hubSpotForm,
    buttonSecondary,
    socialLink,
  } = props
  const [keyBrowser, setKeyBrowser] = React.useState('chrome')
  const isButton = buttonDisplay || button
  const defaultIconConfig = { width: '1.5em', height: '0.5em', fill: 'black' }
  const icon = { ...defaultIconConfig, fill: color, ...iconConfig }
  const isDownloadBrowser = !isEmpty(downloadBrowsers)
  const [delayShow, setDelayShow] = React.useState(isDownloadBrowser)
  const [showPopup, setShowPopup] = React.useState(false)
  let text = textDefault,
    link = linkDefault,
    label = eventLabel,
    lowerBrowserName = lowerCase(browserName),
    iconBrowser = ''
  if (isDownloadBrowser && keyBrowser && downloadBrowsers[keyBrowser]) {
    label = eventLabel.replace('$browser', downloadBrowsers[keyBrowser]?.text)
    text = textDefault.replace('$browser', downloadBrowsers[keyBrowser]?.text)
    if (['ios', 'android', 'not-supported'].includes(keyBrowser)) {
      text = downloadBrowsers[keyBrowser]?.text
    }
    link = downloadBrowsers[keyBrowser]?.link
    iconBrowser = downloadBrowsers[keyBrowser]?.icon
  }
  const onClosePopup = () => {
    setShowPopup(false)
  }
  const handleCustomClick = e => {
    if (hubSpotForm) {
      setShowPopup(true)
      return
    }
    if (customClick) {
      e.preventDefault()
      customClick()
    }
    if (eventCategory && eventLabel) {
      trackCustomEvent({
        category: eventCategory,
        action: 'Click',
        label: label,
      })
    }
  }
  React.useEffect(() => {
    if (isDownloadBrowser) {
      if (
        isMobile &&
        ((isAndroid && downloadBrowsers['android']) ||
          (isIOS && downloadBrowsers['ios']))
      ) {
        if (isAndroid && downloadBrowsers['android']) {
          setKeyBrowser('android')
        } else if (isIOS && downloadBrowsers['ios']) {
          setKeyBrowser('ios')
        }
      } else {
        if (typeof navigator?.brave !== 'undefined') {
          lowerBrowserName = 'brave'
        }
        if (downloadBrowsers[lowerBrowserName]) {
          setKeyBrowser(lowerBrowserName)
        } else if (downloadBrowsers['not-supported']) {
          setKeyBrowser('not-supported')
        } else {
          setKeyBrowser('chrome')
        }
      }
      setDelayShow(false)
    }
  }, [downloadBrowsers, isDownloadBrowser, lowerBrowserName])
  let ele = (
    <CTAContainer
      className={classnames('ctaModuleContainer', {
        socialLink: socialLink,
      })}
      align={align}
    >
      <ContentWrapper
        to={link}
        newTab={newTab || isDownloadBrowser}
        color={color}
        typeLayout={typeLayout}
        onClick={handleCustomClick}
      >
        {socialLink ? <SocialIcon name={socialLink} /> : null}
        <LinkTitle
          className={classnames({
            [`leftArrow`]: showLeftArrow,
            [`rightArrow`]: showRightArrow || socialLink,
          })}
        >
          {showLeftArrow ? <Arrow {...icon} transform={'rotate(180)'} /> : null}
          {text}
          {showRightArrow || socialLink ? <Arrow {...icon} /> : null}
        </LinkTitle>
      </ContentWrapper>
    </CTAContainer>
  )
  if (isButton) {
    ele = (
      <Button
        size={buttonSize}
        link={link}
        text={text}
        className={keyBrowser}
        newTab={newTab || isDownloadBrowser}
        color={buttonSecondary ? 'secondary' : color}
        customClick={handleCustomClick}
        fontSize={fontSize}
        buttonGradient={buttonGradient}
        eventCategory={eventCategory}
        eventLabel={eventLabel}
        iconUrl={!delayShow ? iconBrowser : ''}
        iconPosition={['ios', 'android'].includes(keyBrowser) ? 'start' : 'end'}
        hide={delayShow}
      />
    )
  }

  if (
    isDownloadBrowser &&
    !Object.keys(downloadBrowsers).includes(lowerBrowserName) &&
    downloadBrowsers['browsers-supported']
  ) {
    ele = (
      <BrowserWrapper>
        <BrowserInfo>
          <BrowserInfoTitle>
            {downloadBrowsers['browsers-supported'].text}
          </BrowserInfoTitle>
          <BrowserInfoDesc>
            {downloadBrowsers['browsers-supported'].description}
          </BrowserInfoDesc>
        </BrowserInfo>
        <BrowserList>
          {Object.keys(downloadBrowsers).map(key => {
            const { link, icon, text } = downloadBrowsers[key]
            if (['chrome', 'firefox', 'brave', 'edge'].includes(key)) {
              return (
                <BrowserItem key={text} to={link} newTab>
                  <Image src={icon} />
                  <BrowserName>{text}</BrowserName>
                </BrowserItem>
              )
            }
            return null
          })}
        </BrowserList>
      </BrowserWrapper>
    )
  }

  return (
    <>
      {ele}
      {hubSpotForm ? (
        <Popup showPopup={showPopup} onClosePopup={onClosePopup}>
          {contentfulModuleToComponent({
            ...hubSpotForm,
          })}
        </Popup>
      ) : null}
    </>
  )
}