react-share#WhatsappIcon JavaScript Examples

getShareButtons = (accept_link = 'https://wa.me/918618948661/', helpText) => {
  return (
      <>
          <span className='share-icon'>
                <WhatsappShareButton
                    url={accept_link}
                    title={helpText}>
                  <WhatsappIcon size={32} round/>
                </WhatsappShareButton>
              </span>
        <span className='share-icon'>
                <FacebookShareButton
                    url={accept_link}
                    quote={helpText}>
                  <FacebookIcon size={32} round/>
                </FacebookShareButton>
              </span>
        <span className=''>
                <TwitterShareButton
                    url={accept_link}
                    title={helpText}>
                  <TwitterIcon size={32} round/>
                </TwitterShareButton>
              </span>
      </>
  );
}

SocialMediaButtons = (props) => {
  const location = useLocation();

  let url;
  if (props.url) {
    url = props.url;
  } else {
    url = 'https://covid-19.direct' + location.pathname;
  }

  const bgStyle = {};
  if (props.backgroundColor) {
    bgStyle.fill = props.backgroundColor;
  }

  return (
    <div className={props.className}>
      {[
        [FacebookShareButton, FacebookIcon],
        [TwitterShareButton, TwitterIcon],
        [RedditShareButton, RedditIcon],
        [WhatsappShareButton, WhatsappIcon],
        [EmailShareButton, EmailIcon],
      ].map(([Button, Icon], i) => (
        <Button className={props.buttonClassName} url={url} quote={QUOTE} key={i}>
          <Icon
              size={props.size || '1em'}
              round={true}
              bgStyle={bgStyle}
              iconFillColor={props.iconColor}
          />
        </Button>
      ))}
    </div>
  );
}

TemplateButtons = ({ where, slug }) => {

    let shareUrl;

    if (where === 'members')
        shareUrl = ` https://gecfoss.club/${slug}`
    else
        shareUrl = ` https://gecfoss.club/${where}/${slug}`

    if (where === 'members')
        shareUrl = shareUrl.replace(/^/, "Check out this FCGEC member's profile!\n");
    else if (where === 'blog')
        shareUrl = shareUrl.replace(/^/, "Check out this Blog post on FOSS Club GEC!\n");
    else if (where === 'events')
        shareUrl = shareUrl.replace(/^/, "Check out this Event on FOSS Club GEC!\n");
    else if (where === 'projects')
        shareUrl = shareUrl.replace(/^/, "Check out this Project on FOSS Club GEC!\n");

    return (
        <div className={templateButtonsStyles.buttons}>
            <BackButton where={where} />
            <div className={templateButtonsStyles.share}>
                <EmailShareButton url={shareUrl}>
                    <EmailIcon size={48} />
                </EmailShareButton>
                <WhatsappShareButton url={shareUrl}>
                    <WhatsappIcon size={48} />
                </WhatsappShareButton>
                <LinkedinShareButton url={shareUrl}>
                    <LinkedinIcon size={48} />
                </LinkedinShareButton>
                <TwitterShareButton url={shareUrl}>
                    <TwitterIcon size={48} />
                </TwitterShareButton>
            </div>
        </div>
    )
}

render() {
    return (
        <>
          <Header showCards={false}/>
          {/* Page content */}
          <Container className="mt--7" fluid>
            <Card>
              <CardHeader className="bg-transparent pb-3">
                <div className="text-uppercase text-muted text-center mt-2 mb-2">
                  Frequently Asked Questions
                </div>
              </CardHeader>
              {/*<div style={{height: '60vh'}}>*/}
              {/*  <iframe*/}
              {/*      title="FAQ document"*/}
              {/*      width="100%"*/}
              {/*      height="100%"*/}
              {/*      src="https://docs.google.com/document/d/e/2PACX-1vRlrh9Osh7KikB_T2Mqm0TqbbECR6gpoNHtVXeMi1epFEkrxXJ6Zkp0yX2mRo2zXs1bYYEdWbr82f_C/pub?embedded=true"/>*/}
              {/*</div>*/}
              <div className="faq-container" dangerouslySetInnerHTML={{__html:this.state.html}}/>
            </Card>
            <Row className="mt-2">
              <Col style={{paddingLeft: '20px'}}>
                Still unsatisfied ?</Col>
            </Row>
            <Row className="mt-2">
              <Col style={{textAlign: 'center'}}>
                <Button color="primary" style={{width: '100%'}}>
                  <a href={'https://tinyurl.com/covidsos'} target="_blank" style={{color: 'white'}}
                     rel="noopener noreferrer">
                    Whatsapp Us
                    <WhatsappIcon size={32} round/>
                  </a>
                </Button>
              </Col>
            </Row>
          </Container>
        </>
    );
  }

Person = ({ person }) => (
  <Card className="person">
    <div className="person">
      <a href="https://github.com/devarthurribeiro">
        <img src={person.img} alt="Arthur Ribeiro" />
      </a>
      <h3>{person.name}</h3>
      <span>{person.role}</span>
      <p>
        {person.description}
      </p>
      <div className="flex-center">
        <a href={`https://wa.me/${person.whatsapp}`}>
          <WhatsappIcon
            size={40}
            round
          />
        </a>
        <a href={`https://fb.com/${person.facebook}`}>
          <FacebookIcon size={40} round />
        </a>
        <a href={`https://twitter.com/${person.twitter}`}>
          <TwitterIcon size={40} round />
        </a>
      </div>
    </div>
    <style jsx>
      {`
      .person h3, p {
        margin: 8px
      }

      .person span {
        margin-bottom: 6px;
        color: #818181;
      }

      .person img {
        width: 160px;
        heigth: auto;
        border-radius: 50%;
      }

      .person {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
  `}
    </style>
  </Card>
)

function Team() {
  return (
    <div className="grid team">
      {team.map((person) => (<Person key={person.name} person={person} />))}
      <Card>
        <div className="flex-center">
          <div>
            <h3>Junte-se ao time</h3>
            <span>Faça parte desse projeto</span>
            <p>
              Grupo no whatsapp
            </p>
            <div className="flex-center">
              <a href="https://chat.whatsapp.com/L7AY3Bpv12Y7JzjNTjbdBX">
                <WhatsappIcon
                  size={40}
                  round
                />
              </a>
            </div>
          </div>
        </div>
      </Card>
      <style jsx>
        {`
        .team {
          grid-template-columns: 1fr 1fr 1fr;
        }
        h3, p {
          margin: 8px
        }
        span {
          margin-bottom: 6px;
          color: #818181;
        }
      `}
      </style>
    </div>
  );
}

Dashboard = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(creators.getCurrentUser());
  }, [dispatch]);
  const user = useSelector((state) => state.user.user);
  const url = `${window.location.origin.toString()}/store/${
    user && user.storeName && user.storeName.toLowerCase().split(' ').join('-')
  }-${user && user._id}`;
  const storeLogo = user.imageUrl ? user.imageUrl : NoLogo;
  const copied = () => {
    message.success('url copied successfully');
  };
  return (
    <div className='mainDiv' data-testid='dashboardMainDiv'>
      <div className='dashboardHeader'>
        <div className='welcomeHeader'>
          Welcome, <br />
          <span className='name'>
            {user.ownerName ? user.ownerName : 'Seller'}!
          </span>
        </div>
        <div className='dashboardLogo'>
          <img src={storeLogo} alt='Store Logo' />
        </div>
      </div>
      <div className='storeUrl'>
        <p id='storeUrl' style={{ marginBottom: '1.3rem' }}>
          {user && url}
        </p>
        <CopyToClipboard text={url}>
          <span>
            <Button ghost onClick={copied}>
              Copy URL
            </Button>
          </span>
        </CopyToClipboard>
        <div className='share'>
          <FacebookShareButton url={user && url}>
            <FacebookIcon size={32} round />
          </FacebookShareButton>
          <TwitterShareButton url={user && url}>
            <TwitterIcon size={32} round />
          </TwitterShareButton>
          <LinkedinShareButton url={user && url}>
            <LinkedinIcon size={32} round />
          </LinkedinShareButton>
          <WhatsappShareButton url={user && url}>
            <WhatsappIcon size={32} round />
          </WhatsappShareButton>
          <EmailShareButton url={user && url}>
            <EmailIcon size={32} round />
          </EmailShareButton>
        </div>
      </div>
      <div className='dashDiv'>
        <Content storeId={user._id} currency={user.currency} />
      </div>
    </div>
  );
}

ShareModal = ({ url, theme, setIsShare }) => {
  return (
    <div className="share_modal">
      <div className="share_modal-container">
        <div className="share_modal-header">
          <span>Share to...</span>
          <span onClick={() => setIsShare(false)}>&times;</span>
        </div>
        <div
          className=" share_modal-body"
          style={{ filter: theme ? "invert(1)" : "invert(0)" }}
        >
          <FacebookShareButton url={url}>
            <FacebookIcon round={true} size={32} />
          </FacebookShareButton>

          <TwitterShareButton url={url}>
            <TwitterIcon round={true} size={32} />
          </TwitterShareButton>

          <EmailShareButton url={url}>
            <EmailIcon round={true} size={32} />
          </EmailShareButton>

          <TelegramShareButton url={url}>
            <TelegramIcon round={true} size={32} />
          </TelegramShareButton>

          <WhatsappShareButton url={url}>
            <WhatsappIcon round={true} size={32} />
          </WhatsappShareButton>

          <PinterestShareButton url={url}>
            <PinterestIcon round={true} size={32} />
          </PinterestShareButton>

          <RedditShareButton url={url}>
            <RedditIcon round={true} size={32} />
          </RedditShareButton>

          <LinkedinShareButton url={url}>
            <LineIcon round={true} size={32} />
          </LinkedinShareButton>
        </div>
      </div>
    </div>
  );
}

Poll = (props) => {
    const id = props.match.params.id;
    const {user} = UserSession();
    const uid = user.uid;
    const [label, setLabel] = useState([]);
    const [expiry, setExpiry] = useState(false);
    const [poll, setPoll] = useState(null);
    const [modal, setModal] = useState(false);
    const [pollData, setPollData] = useState([]);
    const [index, setIndex] = useState(-1);
    const handleURL = ()=>{
        navigator.clipboard.writeText("https://insta-poll-72ce3.web.app/" + poll.id);
        toast.success("URL copied to clipboard")
    }
    const showModal = () => {
        setModal(!modal);
      };
    const handleClick = (index)=>{
        setIndex(index);
      let x = poll;
      if(!x.votes[uid])
      {
        x.options.forEach((option)=>{
          if(option.index==index)
          option.count +=1;
      })
      }
      else if(x.votes[uid]!=index)
      {
        x.options.forEach((option)=>{
          if(option.index==(x.votes[uid]))
          {
            option.count-=1;
          }
          else if(option.index==index)
          {
            option.count+=1;
          }
        })
      }
          
          x.votes[uid] = index;
          updatePoll(x);
        
        
   

    }
    const handleLogout  = ()=>{
      firebase.auth().signOut().then(function() {
        }).catch(function(error) {
         
        });
  }
   useEffect(()=>{
       const docRef =  firestore.doc(`/polls/${id}`);
        const unsubscribe = docRef.onSnapshot((document)=>{
            if(document.exists)
            {   setPoll(document.data());
                let x=[], y=[];
              if(document.data().expire)
              {
                if((new Date().getTime()/1000)>=document.data().date.seconds)
                setExpiry(true);
              }
                document.data().options.forEach((option)=>{
                    x.push(option.title);
                    y.push(option.count)
                })
                if(document.data().votes && document.data().votes[uid])
                {
                    setIndex(document.data().votes[uid]);
                }
                setLabel(x);
                setPollData(y);
                
            }
            else
            {
              props.history.push("/not_found");
            }
        })
    }, [])

  
      
    const shareUrl = 'http://github.com';
    const data = {

        labels :label,
        datasets: [
          {
            label: 'Number of Votes',
            data: pollData,
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)',
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
            ],
            borderWidth: 1,
          },
        ],
      }
    
      const options = {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
                precision:0,
                fontFamily:"Mulish",
                fontStyle: '500'
              },
              barPercentage:"0.4"
            },
       
           
          ],
          xAxes: [
            {
              ticks: {
                beginAtZero: true,
                precision:0,
                fontFamily:"Mulish",
                fontStyle:"500"
              },
            },
          ],
        },
        legend:{
            labels:{
                fontFamily: "Mulish"
            },
        },
       
        maintainAspectRatio: false
      
    }

if(!poll)
return( <div
style={{
  width: "100%",
  display: "flex",
  height: "100vh",
  alignItems: "center",
  justifyContent: "center",
  zIndex: "23444898429"
}}
>
<img src={Loader} />
</div>)
    return (
        <div>
          <div className="logout_grid">
            <div>
                <h1 className="head_title animate__animated animate__fadeIn">{poll.title} </h1>
                </div>
                <div>
                <Button type="primary" onClick={handleLogout} className="btn_logout"> Logout <LogoutOutlined /></Button>
                </div>
                </div>
                <Link to="/"><Button type="primary" className="create_btn" >Create a new Poll</Button></Link>
                <br/>
                <ToastContainer newestOnTop autoClose={2000}/>
             <div className="flex">
             <div className="options_div animate__animated animate__fadeInLeft">
         {expiry ? (<h2>This poll is no longer accepting responses ❌</h2>) : (<h2>Select an Option ?</h2>)}       
                {expiry ? (poll.options.map((option)=>{
                           if(option.index!=index)
                  return (
                    <div className="poll_live_expire">
                      {option.title}
                    </div>
                  )
                  else
                  return(
                    <div className="poll_live_expire_selected">
                    {option.title}
                  </div>
                  )
                })) :  (poll.options.map((option)=>
                {
                    if(option.index!=index)
                    return(
                        <div className="poll_live" onClick={()=>handleClick(option.index)}>
                        {option.title}
                    </div>
                    )
                    else
                    return(
                        <div className="poll_live_selected " onClick={()=>handleClick(option.index)}>
                        {option.title}
                    </div>
                    )
                }
                   
                ))}
             </div>
{index!=-1 && ( <div className="graph animate__animated animate__fadeInRight">
             <HorizontalBar data={data}  options={options} />
        </div>)}
            
            </div>
      <div className="share_icons animate__animated animate__fadeIn">
          <h3>Share this Poll <ShareAltOutlined /></h3>
        <TwitterShareButton
            url={`https://insta-poll-72ce3.web.app/${poll.id}`}
            title={`Vote to this poll titled "${poll.title}"  generated using Insta Poll\n`}
            className="share_icon"
          >
            <TwitterIcon size={32} round />
          </TwitterShareButton>
          <WhatsappShareButton
             url={`https://insta-poll-72ce3.web.app/${poll.id}`}
             title={`Vote to this poll titled "${poll.title}"  generated using Insta Poll`}
            separator=":: "
            className="share_icon"
  
          >
            <WhatsappIcon size={32} round  />
          </WhatsappShareButton>
          <FacebookShareButton
            url={`https://insta-poll-72ce3.web.app/${poll.id}`}
            title={`Vote to this poll titled "${poll.title}"  generated using Insta Poll`}
            className="share_icon"
       
          >
            <FacebookIcon size={32} round />
          </FacebookShareButton>
          <br/>
          <Input value={`https://insta-poll-72ce3.web.app/${poll.id}`} style={{width:"15rem"}} disabled/>
          <Button type="primary" onClick={handleURL}>Copy URL</Button>
          <Button type="primary" onClick={showModal} style={{margin:"0.5rem"}}>
          Share QR Code
        </Button>
          <Modal
          visible={modal}
          onOk={showModal}
          onCancel = {showModal}
                style={{textAlign:"center"}}
        >
            <QRCode value={`https://insta-poll-72ce3.web.app/${poll.id}`} style={{height:"12rem", width:"12rem"}}  />
             </Modal>
          </div>
        </div>
    )
}

function ShareButton(props) {
  const [anchorEl, setAnchorEl] = React.useState(null)
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            siteUrl
          }
        }
      }
    `
  )

  function getPageUrl() {
    let url = `${site.siteMetadata.siteUrl}${fullPath}`

    if (props.caseId) {
      url = `${site.siteMetadata.siteUrl}${fullPath}/${props.caseId}`
    }

    if (!isSSR()) {
      url = url + decodeURIComponent(window.location.hash)
    }

    return url
  }

  function handleShareButtonClick(event) {
    if (!isSSR() && isWebShareAPISupported()) {
      const data = getWebShareData(getPageUrl())
      if (navigator.canShare(data)) {
        navigator.share(data).then(() => {
          trackCustomEvent({
            category: "general",
            action: "click",
            label: "share",
          })
        })

        return
      }
    }

    setAnchorEl(event.currentTarget)
  }

  function handleShareButtonClose(media) {
    setAnchorEl(null)
    if (typeof media === "string") {
      trackCustomEvent({
        category: "general",
        action: "click",
        label: `share_${media}`,
      })
    }
  }
  const { pathname: fullPath } = useLocation()

  const url = getPageUrl()

  return (
    <>
      <StyledIconButton
        color="inherit"
        aria-label="Share"
        aria-controls="share-menu"
        aria-haspopup="true"
        onClick={handleShareButtonClick}
      >
        <ShareIcon />
      </StyledIconButton>
      <Menu
        id="share-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleShareButtonClose}
      >
        <MenuItem onClick={() => handleShareButtonClose("facebook")}>
          <FacebookShareButton
            url={getShareUrl(url, "facebook")}
            children={<FacebookIcon size={32} round={true} />}
          />
        </MenuItem>
        <MenuItem onClick={() => handleShareButtonClose("telegram")}>
          <TelegramShareButton
            url={getShareUrl(url, "telegram")}
            children={<TelegramIcon size={32} round={true} />}
          />
        </MenuItem>
        <MenuItem onClick={() => handleShareButtonClose("whatsapp")}>
          <WhatsappShareButton
            url={getShareUrl(url, "whatsapp")}
            children={<WhatsappIcon size={32} round={true} />}
          />
        </MenuItem>
        <MenuItem onClick={() => handleShareButtonClose("twitter")}>
          <TwitterShareButton
            url={getShareUrl(url, "twitter")}
            children={<TwitterIcon size={32} round={true} />}
          />
        </MenuItem>
        <MenuItem onClick={() => handleShareButtonClose("link")}>
          <StyledCopyIcon
            onClick={() => {
              navigator.clipboard.writeText(url)
            }}
          />
        </MenuItem>
      </Menu>
    </>
  )
}

render() {
    if (!isAuthorisedUserLoggedIn()) {
      localStorage.setItem(config.redirectToPageKey, this.props.location.pathname);
      this.props.history.push("/admin-login");
      return null;
    }
    const {request, verification_status, sources} = this.state;
    const {why, what, financial_assistance, urgent, r_id, volunteers_reqd, members_impacted, source, mob_number, geoaddress, name, timestamp} = request;

    if (!r_id) {
      return null;
    }
    return (
        <>
          <Header showCards={false}/>
          {/* Page content */}
          <Container className="mt--7" fluid>
            <Row className="justify-content-center">
              <Col lg="8" md="8">
                <Card className="bg-secondary shadow border-0">
                  <CardBody className="px-lg-3 py-lg-3 text-justify">
                    <div className="text-uppercase text-center mt-2 mb-2">
                      Verify Request
                    </div>
                  </CardBody>
                </Card>
              </Col>
            </Row>
          </Container>
          <Container className="request-card-container" fluid>
            <Row className="mt-5">
              <Card className='request-verification-card center-align' key={r_id}>
                <CardBody>
                  <div className='request-head'>
                    <div className='text-align-left center-align padding-right-30'>
                      <p className='no-margin'>Name</p>
                      <h3>{name}</h3>
                    </div>
                    <div className='text-align-right center-align'>
                      <p className='no-margin'>Request Time</p>
                      <h5>{timestamp}</h5>
                    </div>
                  </div>

                  <div className='request-address'>
                    <p className='no-margin'>Address</p>
                    <h5>{geoaddress}</h5>
                  </div>
                  <div className='request-info'>
                    <div className='v-center-align'>
                      <h2><a href={'tel:' + mob_number}>{mob_number}</a></h2>
                    </div>
                    <div className='text-center'>
                      <div className='v-center-align'>
                        <a href={`https://wa.me/91${mob_number}`}>
                          <WhatsappIcon size={32}/>
                        </a>
                      </div>
                    </div>
                  </div>
                  <Form className='verify-request-form'>
                    <FormGroup>
                      <Label>Why do they need help?</Label>
                      <Input autoComplete="off" type="textarea" name="address" value={why}
                             onChange={(event) => this.onChange('why', event.target.value)}/>
                    </FormGroup>
                    <FormGroup>
                      <Label>What does {name} need?</Label>
                      <Input autoComplete="off" type="textarea" name="address2" value={what}
                             onChange={(event) => this.onChange('what', event.target.value)}/>
                    </FormGroup>
                    <div className="custom-control custom-control-alternative custom-checkbox mb-4">
                      <input
                          className="custom-control-input"
                          id="financialAssistanceCheck"
                          type="checkbox"
                          checked={financial_assistance}
                          onChange={event => this.onChange('financial_assistance',
                              event.target.checked ? 1 : 0)}/>
                      <label className="custom-control-label" htmlFor="financialAssistanceCheck">
                        <span className="text-muted">This person needs financial assistance</span>
                      </label>
                    </div>
                    <div className="mb-4">
                      Urgent ?
                      <FormGroup check style={{display: 'inline-block', marginLeft: '20px'}}>
                        <Label check>
                          <Input type="radio" name="radio1" checked={urgent === "yes"}
                                 onChange={event => this.onChange('urgent',
                                     event.target.checked && "yes")}/>{' '}
                          Yes
                        </Label>
                      </FormGroup>
                      <FormGroup check style={{display: 'inline-block', marginLeft: '20px'}}>
                        <Label check>
                          <Input type="radio" name="radio1" checked={urgent === "no"}
                                 onChange={event => this.onChange('urgent',
                                     event.target.checked && "no")}/>{' '}
                          No
                        </Label>
                      </FormGroup>
                    </div>
                    <FormGroup>
                      <Label for="exampleEmail">Vounteer Count</Label>
                      <Input type="text" name="volunteer_count"
                             id="vounteerCount" placeholder="enter volunteer count"
                             value={volunteers_reqd}
                             onChange={(event) => this.onChange('volunteers_reqd',
                                 event.target.value)}
                      />
                    </FormGroup>
                    <FormGroup>
                      <Label for="exampleEmail">Number of People who need help</Label>
                      <Input type="number" name="members_impacted"
                             id="member_impacted"
                             placeholder="Enter number of people who need help count"
                             value={members_impacted}
                             onChange={(event) => this.onChange('members_impacted',
                                 event.target.value)}
                      />
                    </FormGroup>
                    <div>
                      <FormGroup>
                        <Label for="source">Select</Label>
                        <Input type="select" name="select" id="source"
                               onChange={(event) => this.onChange('source', event.target.value)}>
                          {
                            sources.map(sourceOpt => {
                              return <option key={sourceOpt.org_code}
                                             id={sourceOpt.id} selected={sourceOpt.org_code === source}>{sourceOpt.org_code}</option>
                            })
                          }
                        </Input>
                      </FormGroup>
                    </div>
                    <div className='text-center'>
                      <Button
                          outline={!(verification_status === 'rejected')}
                          disabled={verification_status.length > 0}
                          color="danger"
                          onClick={() => this.handleSubmit('rejected')}
                      >Deny Help</Button>
                      <Button
                          disabled={verification_status.length > 0}
                          outline={!(verification_status === 'verified')}
                          color="success"
                          onClick={() => this.handleSubmit('verified')}
                      >Verify</Button>
                    </div>
                  </Form>
                </CardBody>
              </Card>
            </Row>
          </Container>
        </>

    )
  }

render() {
    const {isLoading, why, what, address, financialAssistance, urgent, accept_status, name, source, source_org} = this.state;
    const shareText = `Hey, ${name} in your area *${address}* requires help!\n\n\n*Why does ${name} need help?*\n${why}\n\n\n*How can you help ${name}?*\n${what}\n\n\nThis is a verified request received via www.covidsos.org and it would be great if you can help.!?\n\n\nIf you can help, please click:`

    return (
        <>
          <Header showCards={false}/>
          <Container className="request-accept-container mt--6">
            <Card>
              <CardBody>
                {isLoading && this.loadingMessage()}
                {!isLoading && !this.state.accept_success && <React.Fragment>
                  <Row>
                    <Col className="image-col">
                      <div className="text-uppercase text-muted mt-2 mb-2">
                        <img alt='logo' src={require("assets/img/icons/requestAccept.png")}/>
                      </div>
                    </Col>
                  </Row>
                  <Row>
                    <Col className="font-weight-bold" style={{fontSize: "1.3rem"}}>
                      {name || 'Someone'} nearby needs help!
                    </Col>
                  </Row>
                  <Row>
                    <Col>
                      <i className={urgent === "yes" ? "fa fa-exclamation-triangle text-red"
                          : "fas fa-check-circle text-green "}
                         style={{fontSize: "1.3rem", paddingRight: "10px"}}/>
                      <span>{urgent === "yes" ? 'This is an urgent request.'
                          : 'This request needs to be completed in 1-2 days.'}</span>
                    </Col>
                  </Row>
                  <Row className="mt-4">
                    <Col xs="12">
                      <label className="mb-0" htmlFor="address">Address </label>
                    </Col>
                    <Col xs="12">
                      <div> {address} </div>
                    </Col>
                  </Row>
                  <Row className="mt-3">
                    <Col xs="12">
                      <label className="mb-0" htmlFor="address">Received via</label>
                    </Col>
                    <Col xs="12">
                      <div> {source_org || source} </div>
                    </Col>
                  </Row>
                  <Row className="mt-3">
                    <Col xs="12">
                      <label className="mb-0" htmlFor="why">Why does {name} need help? </label>
                    </Col>
                    <Col xs="12">
                      <div className="data-item" style={{padding: '10px'}}> {why} </div>
                    </Col>
                  </Row>
                  <Row className="mt-2">
                    <Col xs="12">
                      <label className="mb-0" htmlFor="why"> What does {name} need? </label>
                    </Col>
                    <Col xs="12">
                      <div className="data-item" style={{padding: '10px'}}> {what} </div>
                    </Col>
                  </Row>
                  {
                    accept_status === 'received' || accept_status === 'verified'
                        ? (
                            <React.Fragment>
                              <Row>
                                <Col className="text-primary mt-4">
                                  {financialAssistance ? 'This help seeker cannot afford to pay.'
                                      : 'This help seeker can afford to pay.'}
                                </Col>
                              </Row>
                              <Row className="justify-content-center mt-4">
                                <Form role="form" onSubmit={this.acceptRequest}>
                                  <FormGroup>
                                    <Label check>
                                      <Input type="radio" name="radio1"
                                             checked={this.state.isAvailable === true}
                                             onChange={() => this.toggleRadioButton()}/>{' '}
                                      I will try my best to help this person
                                    </Label>

                                  </FormGroup>
                                  <Row>
                                    <Col className="col-6">
                                      <WhatsappShareButton
                                          url={window.location.href}
                                          title={shareText}
                                      >
                                        <Button onClick={this.handleBusyResponse}>Share</Button>
                                      </WhatsappShareButton>
                                    </Col>
                                    <Col className="col-6">
                                      <Button color="primary" type="submit"
                                              disabled={!this.state.isAvailable}>I will help</Button>
                                    </Col>
                                  </Row>
                                </Form>
                              </Row>
                              <Row className="justify-content-center mt-4" style={{
                                textAlign: 'center',
                                padding: '4px',
                                margin: '4px',
                                backgroundColor: '#efefef'
                              }}>
                                <Col>

                                  <a href={'/faq'} target="_blank"
                                     rel="noopener noreferrer">
                                    Have any queries ? Click here.
                                    <WhatsappIcon size={32} round/>
                                  </a>
                                </Col>
                              </Row>
                            </React.Fragment>
                        )
                        : (
                            <Row className="mt-4">
                              <Col style={{textAlign: 'center'}}>
                                Thankyou for stepping up to help. This request is already accepted.
                                <br/><br/>
                                <Button onClick={this.redirectToPendingRequests} color="outline-primary">Please check the
                                  pending ones here.</Button>
                              </Col>
                            </Row>
                        )
                  }
                </React.Fragment>
                }
                {!isLoading && this.state.accept_success &&
                <>
                  <div className="text-center">
                    <img className="accept-confirm-img" alt='confirm'
                         src={require("assets/img/brand/accept_confirm.png")}/>
                    <Button color="outline-primary" className="btn mt-4"
                            onClick={() => this.props.history.push("/taskboard")}>
                      Continue to #CovidHERO Dashboard
                    </Button>
                  </div>
                </>
                }
              </CardBody>
            </Card>
          </Container>
        </>
    )
  }

TabIndiaInfo = ({ i18n }) => {
  return (
    <div>
      <div>
        <Title level="H3">{i18n.T_TEST_CENTER_HELPLINE}</Title>
        <Label wrap className="subHeaderText">
          (Last Updated : 22 March 2020)
        </Label>
        <ul>
          <li>
            <WhatsappIcon className="linkIcon" size={20} round />
            {'   '}
            <Label>{i18n.WHATSAPP_HELPLINE}</Label>
            {' :  '}
            <Link href="https://api.whatsapp.com/send?phone=919013151515&text=Hi&source=&data=">
              {'India Helpline'}
            </Link>
          </li>
          <li>
            <Label>{i18n.PHONE}</Label>
            {' :  '}
            <Link href="tel:+91-11-23978046">+91-11-23978046</Link>
            {' &  '}
            <Link href="tel:1075">1075</Link>
          </li>
          <li>
            <Label>Email</Label>
            {' :  '}
            <Link href="mailto:[email protected] " target="_blank">
              [email protected]
            </Link>
          </li>
        </ul>
        <Title level="H3">{i18n.IMPORTANT_WEBSITES}</Title>
        <ul>
          <li>
            <Label>{i18n.T_INDIA_WEBSITE}</Label>
            {'  '}
            <Link href="https://www.mohfw.gov.in/" target="_blank" wrap>
              {i18n.MINISTRY_OF_HEALTH}
            </Link>
          </li>
          <li>
            <Label>{i18n.T_INDIA_WEBSITE} </Label>
            {'  '}
            <Link href="https://icmr.nic.in/content/covid-19" target="_blank" wrap>
              {i18n.ICMR_FULL}
            </Link>
          </li>
          <br />
          <li>
            <Label>{i18n.MINISTRY_OF_HEALTH}</Label>
            {' :  '}
            <Link
              href="https://icmr.nic.in/sites/default/files/upload_documents/2020-03-20_covid19_test_v3.pdf"
              target="_blank"
              wrap
            >
              Testing Strategy - Version 3
            </Link>
          </li>
          <li>
            <Label>{i18n.ALL_HELPLINE_NUMBERS}</Label>
            {' :  '}
            <Link href="https://www.mohfw.gov.in/coronvavirushelplinenumber.pdf" target="_blank">
              {i18n.ALL_STATE_UT}
            </Link>
          </li>
          <li>
            <Link
              href="https://icmr.nic.in/sites/default/files/upload_documents/List_of_VRDL_V2.pdf"
              target="_blank"
            >
              {i18n.LAB_ACROSS_INDIA}
            </Link>
          </li>
        </ul>
        <Title level="H3"> {i18n.ADDITIONAL_INFO} </Title>
        <ul>
          <li>
            <Label>Apollo</Label>
            {' :  '}
            <Link href="https://covid.apollo247.com/" target="_blank">
              {i18n.COVID_RISK_SCANNER}
            </Link>
          </li>
          <li>
            <Label>Youtube (Ministry of Health) </Label>
            {' :  '}
            <Link href="https://www.mohfw.gov.in/FINAL_14_03_2020_Hindi.pdf" target="_blank" wrap>
              COVID-19 Management Videos
            </Link>
          </li>
          <li>
            <Label>WHO</Label>
            {' :  '}
            <Link
              href="https://www.who.int/emergencies/diseases/novel-coronavirus-2019/advice-for-public"
              target="_blank"
              wrap
            >
              Advice for Public
            </Link>
          </li>
          <li>
            <WhatsappIcon className="linkIcon" size={20} round />
            {'   '}
            <Label>{i18n.WHATSAPP_HELPLINE}</Label>
            {' :  '}
            <Link href="https://api.whatsapp.com/send?phone=41798931892&text=hi&source=&data=">
              WHO
            </Link>
          </li>
        </ul>
        <br />
      </div>
    </div>
  );
}

function App() {
  const {
    history,
    location: { pathname },
  } = useReactRouter();

  useEffect(() => {
    if (!routes.includes(pathname)) {
      history.replace(routes[0]);
    }
    // eslint-disable-next-line
  }, []);

  const [state, dispatch] = useReducer(reducer, initialState);
  const i18n = state.i18n;

  const aRelevantLanguages = getValidLocale();

  const handleTabSelect = event => {
    history.push(mapTabToRoute(event.parameters.item.slot));
  };

  return (
    <div className="App">
      <div className="Covid19App">
        <div className="headerShellBar">
          <div className="shellBarLeft">
            <Button
              design={ButtonDesign.Transparent}
              icon="home"
              className="shellBarBtn"
              onClick={() => window.location.replace('https://myswastha.in/')}
            ></Button>
          </div>
          <div className="shellBarCenter">{i18n.HOME_TITLE}</div>
          <div className="shellBarRight">
            <Button
              design={ButtonDesign.Transparent}
              icon="world"
              className="shellBarBtn"
              onClick={() => dispatch({ type: 'openLanguageDialog' })}
            ></Button>
            <Button
              design={ButtonDesign.Transparent}
              icon="sys-help"
              className="shellBarIconBtn"
              onClick={() => dispatch({ type: 'openDialog' })}
            ></Button>
            <ActionSheet
              openBy={
                <Button
                  design={ButtonDesign.Transparent}
                  icon="share"
                  className="shellBarIconBtn"
                />
              }
              placement={'Bottom'}
            >
              <FacebookShareButton
                url="https://myswastha.in/"
                quote={i18n.SHARING_TITLE}
                hashtag="#MySwastha #FlattenTheCurve"
              >
                <FacebookIcon size={32} round={true} />
              </FacebookShareButton>
              <WhatsappShareButton url="https://myswastha.in/" title={i18n.SHARING_TITLE}>
                <WhatsappIcon size={32} round={true} />
              </WhatsappShareButton>
              <TwitterShareButton
                url="https://myswastha.in/"
                title={i18n.SHARING_TITLE}
                hashtags={['FlattenTheCurve', 'MySwastha']}
                via={['nitish_mehta']}
              >
                <TwitterIcon size={32} round={true} />
              </TwitterShareButton>
              <LinkedinShareButton url="https://myswastha.in/" title={i18n.SHARING_TITLE}>
                <LinkedinIcon size={32} round={true} />
              </LinkedinShareButton>
            </ActionSheet>
          </div>
        </div>
        <MessageStrip
          className="archivedNotification"
          icon={null}
          noCloseButton={true}
          noIcon={false}
          type={'Warning'}
        >
          NOTE: This app has been archived. <br />
          Kindly use{' '}
          <Link href="https://www.mygov.in/aarogya-setu-app/" target="_blank" wrap>
            Aarogya Setu{' '}
          </Link>{' '}
          app or{' '}
          <Link href="https://www.mohfw.gov.in/" target="_blank" wrap>
            Ministry of Health{' '}
          </Link>{' '}
          website for latest info. <b>Stay Safe &amp; Healthy !</b>
        </MessageStrip>

        <TabContainer className="c19IconTab" showOverflow onItemSelect={handleTabSelect} fixed>
          <Tab text={i18n.UNWELL} icon="stethoscope" selected={pathname === routes[0]}>
            <TabEligibilityChecker i18n={i18n} />
          </Tab>
          <Tab icon="notes" selected={pathname === routes[1]}>
            <TabIndiaInfo i18n={i18n} />
          </Tab>
          <Tab text={''} icon="business-objects-experience" selected={pathname === routes[2]}>
            <TabMoreInfo i18n={i18n} />
          </Tab>
        </TabContainer>

        <Dialog
          headerText={i18n.ABOUT_THIS_WEBSITE}
          stretch={false}
          open={state.isHelpDialogOpen}
          footer={
            <Button className="dialogFooterBtn" onClick={() => dispatch({ type: 'closeDialog' })}>
              {i18n.CLOSE}
            </Button>
          }
        >
          <div style={{ width: '300px', height: '400px' }}>
            <Label wrap className="disclaimerText">
              {i18n.WEBSITE_DISCLAIMER}
            </Label>
            <br />
            <br />
            <Label wrap>{i18n.WEBSITE_DESCRIPTION_1}</Label>
            <br />
            <br />
            <Label wrap>
              {i18n.WEBSITE_DESCRIPTION_2}{' '}
              <Link href="https://github.com/nitish-mehta/covid19action" target="_blank" wrap>
                GitHub{' '}
              </Link>
              {i18n.WEBSITE_DESCRIPTION_3}
            </Label>
            <br />
            <Label wrap>
              {i18n.WEBSITE_DESCRIPTION_4}{' '}
              <Link href="https://twitter.com/nitish_mehta" target="_blank" wrap>
                Twitter
              </Link>{' '}
              {i18n.AND}{' '}
              <Link href="https://www.linkedin.com/in/nitishmehta08/" target="_blank" wrap>
                LinkedIn.
              </Link>{' '}
            </Label>
            <br />
            <br />
            <Label wrap>{i18n.WEBSITE_DESCRIPTION_5}</Label>
            <br />
            <br />
            <FlexBox
              justifyContent={'SpaceBetween'}
              alignItems={'Stretch'}
              direction={'Row'}
              displayInline={false}
              fitContainer
            >
              <FacebookShareButton
                url="https://myswastha.in/"
                quote={i18n.SHARING_TITLE}
                hashtag="#MySwastha #FlattenTheCurve"
              >
                <FacebookIcon size={32} round={true} />
              </FacebookShareButton>
              <WhatsappShareButton url="https://myswastha.in/" title={i18n.SHARING_TITLE}>
                <WhatsappIcon size={32} round={true} />
              </WhatsappShareButton>
              <TwitterShareButton
                url="https://myswastha.in/"
                title={i18n.SHARING_TITLE}
                hashtags={['FlattenTheCurve', 'MySwastha']}
                via={['nitish_mehta']}
              >
                <TwitterIcon size={32} round={true} />
              </TwitterShareButton>{' '}
              <LinkedinShareButton url="https://myswastha.in/" title={i18n.SHARING_TITLE}>
                <LinkedinIcon size={32} round={true} />
              </LinkedinShareButton>
            </FlexBox>
          </div>
        </Dialog>

        <Dialog
          headerText={'Change Language'}
          stretch={false}
          open={state.isLanguageDialogOpen}
          footer={
            <Button
              className="dialogFooterBtn"
              onClick={() => dispatch({ type: 'closeLanguageDialog' })}
            >
              {i18n.CLOSE}
            </Button>
          }
        >
          <div style={{ width: '250px', height: '300px' }}>
            <Link
              href="
                  https://github.com/nitish-mehta/covid19action#how-can-you-help"
              target="_blank"
              wrap
            >
              (Help Improve Translations)
            </Link>{' '}
            <ul>
              {aRelevantLanguages.map(currentVal => {
                return (
                  <li key={currentVal.code}>
                    <Button
                      design={ButtonDesign.Transparent}
                      onClick={() => {
                        dispatch({ type: 'closeLanguageDialog' });
                        dispatch({
                          type: 'i18nChange',
                          payload: changeCurrentLocale(currentVal.code),
                        });
                      }}
                    >
                      {currentVal.displayText}
                    </Button>
                  </li>
                );
              })}
            </ul>
          </div>
        </Dialog>
      </div>
    </div>
  );
}

function CountryCard(props) {
  const [data, setData] = useState({});

  useEffect(() => {
    async function fethData() {
      const result = await axios.get(
        `${window.location.origin}/api/report/v1/${props.country}`,
      );
      setData(result.data.data);
    }
    fethData();
  }, []);

  function formatNumber(number) {
    if (number < 10) {
      return `0${number}`;
    }
    return number;
  }

  function formatDate(date) {
    const d = new Date(date);
    const day = `${formatNumber(d.getDate())}/${formatNumber(d.getMonth() + 1)}/${d.getFullYear()}`;
    const hour = `${formatNumber(d.getHours())}:${formatNumber(d.getMinutes())}`;
    return `${day} - ${hour}`;
  }

  function shareData() {
    return (`
*Casos coronavírus no ${data.country} ${mapBrands[data.country]}*

? *Atualizado* ${formatDate(data.updated_at)}

✅ *${data.confirmed}* Confirmados
? *${data.cases}* Ativos
♻️ *${data.recovered}* Recuperados
? *${data.deaths}* Mortes

? *Fonte:* WHO, CDC, ECDC, NHC and DXY
covid19-brazil-api.now.sh/status

⚠️ *Evite fake news*

☢️ *Sobre a doença*
coronavirus.saude.gov.br/index.php/sobre-a-doenca
    `);
  }

  function send() {
    analityc.event({
      category: 'share',
      action: `share-country-report-${data.country.toLowerCase()}`,
    });
    window.open(
      `https://api.whatsapp.com/send?text=${encodeURIComponent(shareData())}`,
    );
  }

  return (
    <Card
      link=""
      title={`Status ${data.country} ${mapBrands[data.country]}`}
    >
      <p>
        <span role="img" aria-label="check">✅</span>
        {' '}
        <strong>{data.confirmed}</strong>
        {' '}
        Confirmados
        {' '}
        <br />
        <span role="img" aria-label="alert">?</span>
        {' '}
        <strong>{data.cases}</strong>
        {' '}
        Ativos
        {' '}
        <br />
        <span role="img" aria-label="recovery">♻️</span>
        {' '}
        <strong>{data.recovered}</strong>
        {' '}
        Recuperados
        {' '}
        <br />
        <span role="img" aria-label="death">?</span>
        {' '}
        <strong>{data.deaths}</strong>
        {' '}
        Mortes
        <hr />
        <span role="img" aria-label="time">?</span>
        {' '}
        <strong>Atualizado</strong>
        {' '}
        {formatDate(data.updated_at)}
        {' '}
        <br />
        <span role="img" aria-label="chart">?</span>
        {' '}
        <strong>Fonte</strong>
        {' '}
        WHO
      </p>
      <strong>Compartilhar</strong>
      <div className="flex-center">
        <span className="pointer">
          <WhatsappIcon
            onClick={send}
            size={48}
          />
        </span>
        <FacebookShareButton url="https://covid19-brazil-api.now.sh/status" quote={shareData()}>
          <FacebookIcon size={48} />
        </FacebookShareButton>
        <TwitterShareButton url="https://covid19-brazil-api.now.sh/status" title={shareData().substr(1, 240)}>
          <TwitterIcon size={48} />
        </TwitterShareButton>
      </div>

      <style jsx>
        {`
      .share-button {
        width: 100%;
        background: #202124;
        color: #4ffa7b;
        font-weight: 600;
        border-radius: 30px;
        font-size: 1.1rem;
        padding: 8px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0;
        cursor: pointer;
        transition: background 0.5s;
      }
      }
      .share-button img {
        margin-left: 16px
      }
      .pointer {
        cursor: pointer;
      }
      `}
      </style>
    </Card>
  );
}

function CountryCard() {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fethData() {
      const result = await axios.get(
        `${window.location.origin}/api/report/v1`,
      );
      setData(result.data.data.sort((a, b) => (a.cases < b.cases ? 1 : -1)));
    }
    fethData();
  }, []);

  function formatNumber(number) {
    if (number < 10) {
      return `0${number}`;
    }
    return number;
  }

  function formatDate(date) {
    const d = new Date(date);
    const day = `${formatNumber(d.getDate())}/${formatNumber(d.getMonth() + 1)}/${d.getFullYear()}`;
    const hour = `${formatNumber(d.getHours())}:${formatNumber(d.getMinutes())}`;
    return `${day} - ${hour}`;
  }

  const stateCasesToStings = (report) => (`*${report.uf}* Casos ${report.cases} Mortes ${report.deaths} \n`);

  function shareData() {
    let textReport = '';
    data.forEach((report) => {
      textReport += stateCasesToStings(report);
    });
    return (`
*Casos coronavírus no ??*

? *Atualizado* ${formatDate(data[0].datetime)}

${textReport}

? *Fonte:*
covid19-brazil-api.now.sh/status

⚠️ *Evite fake news*

*Dados*
saude.gov.br
    `);
  }

  function send() {
    analityc.event({
      category: 'share',
      action: 'share-brazil-states-report',
    });
    window.open(
      `https://api.whatsapp.com/send?text=${encodeURIComponent(shareData())}`,
    );
  }

  function getFlag(uf) {
    return `https://devarthurribeiro.github.io/covid19-brazil-api/static/flags/${uf}.png`;
  }

  return (
    <Card
      link=""
      title="Status Brasil por UF"
    >
      <div>
        <table>
          <thead>
            <tr>
              <td>
                <span role="img" aria-label="alert">?</span>
                {' '}
                <strong>Estado</strong>
              </td>
              <td>
                <span role="img" aria-label="alert">?</span>
                {' '}
                <strong>Confirmados</strong>
              </td>
              <td>
                <span role="img" aria-label="death">?</span>
                {' '}
                <strong>Mortes</strong>
              </td>
            </tr>
          </thead>
        </table>
        <div className="table-scroll">
          <table className="tbl-header">
            {data.map((report) => (
              <tr>
                <td className="flex">
                  <img src={getFlag(report.uf)} alt="uf flag" width="20px" />
                  <span>{report.uf}</span>
                </td>
                <td className="text-rigth">
                  {report.cases}
                </td>
                <td className="text-rigth">
                  {report.deaths}
                </td>
              </tr>
            ))}
          </table>
        </div>
      </div>
      <p>
        <strong>Compartilhar</strong>
      </p>
      <div className="flex-center">
        <span className="pointer">
          <WhatsappIcon
            onClick={send}
            size={48}
          />
        </span>
      </div>

      <style jsx>
        {`
          .flex {
            display: flex;
            flex-direction: row;
          }
          table {
            width:100%;
            table-layout: fixed;
          }
          .text-rigth {
            text-align: left;
          }
          td{
            padding: 6px;
            text-align: left;
            vertical-align:middle;
            font-weight: 300;
            font-size: 12px;
            color: #fff;
            border-bottom: solid 1px rgba(255,255,255,0.1);
          }
          td > img {
            margin-right: 8px;
          }
          .table-scroll {
            max-height: 600px;
            overflow: auto;
          }
      `}
      </style>
    </Card>
  );
}

MapContainer = ({ pins }) => {
  const theme = useTheme()
  const isBigEnough = useMediaQuery(theme.breakpoints.up('sm'))
  const { t } = useTranslation()
  const [email, setEmail] = useState()
  return (
    <Wrapper>
      <div style={{ paddingBottom: '2rem' }}>
        <MaxWidth>
          <Typography
            variant='h1'
            style={{
              fontSize: '2em',
              marginTop: '1.3rem',
              marginLeft: '0.5rem',
            }}
            gutterBottom
          >
            {t('title')}
          </Typography>
          {isBigEnough && (
            <Typography
              style={{
                fontSize: '1.3em',
                marginBottom: '1.3rem',
                marginLeft: '0.5rem',
              }}
              gutterBottom
              variant='h2'
            >
              {t('subtitle')}
            </Typography>
          )}
          <MapDiv>
            <Map pins={pins} />
          </MapDiv>
          <div
            style={{
              display: 'flex',
              flexDirection: 'row-reverse',
            }}
          >
            <FacebookShareButton
              style={{ marginRight: '0.5rem' }}
              url={'https://www.coviddash.org'}
              quote={'Volunteer for COVID-19 Vaccination trials near you'}
              onClick={() => {
                ReactGA.event({
                  category: 'volunteer',
                  action: 'Clicked share via facebook',
                })
              }}
            >
              <FacebookIcon size={30} round={true} />
            </FacebookShareButton>
            <TwitterShareButton
              style={{ marginRight: '0.5rem' }}
              url={'https://www.coviddash.org'}
              title={'Volunteer for COVID-19 Vaccination trials near you'}
              hashtags={['COVID19', 'Volunteer', 'Coronavirus', 'Vaccines']}
              onClick={() => {
                ReactGA.event({
                  category: 'volunteer',
                  action: 'Clicked share via twitter',
                })
              }}
            >
              <TwitterIcon size={30} round={true} />
            </TwitterShareButton>
            <PinterestShareButton
              url={'https://www.coviddash.org'}
              style={{ marginRight: '0.5rem' }}
              media={'https://coviddash.org/CovidTrialVolunteer.png'}
              className='mr-2'
              onClick={() => {
                ReactGA.event({
                  category: 'volunteer',
                  action: 'Clicked share via pinterest',
                })
              }}
            >
              <PinterestIcon size={30} round={true} />
            </PinterestShareButton>
            <EmailShareButton
              style={{ marginRight: '0.5rem' }}
              subject={
                'I thought you might be interested in volunteering for COVID-19 Vaccination trials'
              }
              separator=' '
              body={
                'I thought you may be interested in volunteering to help save lives. Covidtrialdash.org helps you find vaccination trials near you.'
              }
              url={'https://www.covidtrialdash.org'}
              className='mr-2'
              openShareDialogOnClick={true}
              onClick={() => {
                ReactGA.event({
                  category: 'volunteer',
                  action: 'Clicked share via email',
                })
              }}
            >
              <EmailIcon size={30} round={true} />
            </EmailShareButton>
            <WhatsappShareButton
              style={{ marginRight: '0.5rem' }}
              url={'https://www.coviddash.org'}
              title='Volunteer for COVID Vaccination trials in your area.'
              className='mr-2'
              onClick={() => {
                ReactGA.event({
                  category: 'volunteer',
                  action: 'Clicked share via whatsapp',
                })
              }}
            >
              <WhatsappIcon size={30} round={true} />
            </WhatsappShareButton>
          </div>
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <div style={{ fontSize: '17px' }}>
              If you can&apos;t find a study now, or you&apos;d like to stay up
              to date, sign up for our email list!
            </div>
            <MailchimpSubscribe
              url={process.env.REACT_APP_MAILCHIMP_URL}
              render={({ subscribe, status, message }) => (
                <div style={{ marginTop: '1rem', width: '280px' }}>
                  <form
                    onSubmit={event => {
                      event.preventDefault()
                      subscribe({ EMAIL: email })
                    }}
                  >
                    <TextField
                      id='subscribe'
                      label='Your email'
                      variant='outlined'
                      style={{ width: '100%' }}
                      onChange={e => setEmail(e.target.value)}
                    />
                    <div style={{ marginTop: '1rem' }}>
                      <Button
                        type='submit'
                        fullWidth
                        variant='contained'
                        color='primary'
                      >
                        Subscribe
                      </Button>
                    </div>
                  </form>
                  {status === 'sending' && (
                    <p style={{ color: 'blue', textAlign: 'center' }}>
                      Sending...
                    </p>
                  )}
                  {status === 'error' && (
                    <p
                      style={{ color: 'red', textAlign: 'center' }}
                      dangerouslySetInnerHTML={{ __html: message }}
                    />
                  )}
                  {status === 'success' && (
                    <p style={{ color: 'green', textAlign: 'center' }}>
                      Subscribed!
                    </p>
                  )}
                </div>
              )}
            />
            <div style={{ fontSize: '17px', paddingTop: '2rem' }}>
              For immediate assistance, call us at +1 (224) 444-0082
            </div>
          </div>
        </MaxWidth>
      </div>
      <HomeSections />
    </Wrapper>
  )
}

ShareModal = (props) => {
  const { onRequestClose, shareModalIsOpen, shareData } = props;

  Modal.setAppElement('#__next');

  return (
    <Modal
      className={clubEventStyles.ShareModal}
      isOpen={shareModalIsOpen}
      onRequestClose={onRequestClose}
      shouldCloseOnOverlayClick={true}
      closeTimeoutMS={200}
    >
      <h2>Share This Event</h2>
      <input type="text" value={shareData.eventUrl} readOnly />
      <div className={clubEventStyles.sharePlatforms}>
        <FacebookShareButton
          url={shareData.eventUrl}
          quote={shareData.shareDescription}
          hashtag={'#bccompsciclub'}
          disabled
        >
          <FacebookIcon size={32} round />
        </FacebookShareButton>

        <TwitterShareButton
          url={shareData.eventUrl}
          title={shareData.shareDescription}
          hashtags={['bccompsciclub']}
        >
          <TwitterIcon size={32} round />
        </TwitterShareButton>

        <LinkedinShareButton
          url={shareData.eventUrl}
          title={shareData.shareTitle}
          summary={shareData.shareDescription}
        >
          <LinkedinIcon size={32} round />
        </LinkedinShareButton>

        <FacebookMessengerShareButton url={shareData.eventUrl} disabled>
          <FacebookMessengerIcon size={32} round />
        </FacebookMessengerShareButton>

        <WhatsappShareButton
          url={shareData.eventUrl}
          title={shareData.shareDescription}
        >
          <WhatsappIcon size={32} round />
        </WhatsappShareButton>

        <TelegramShareButton
          url={shareData.eventUrl}
          title={shareData.shareDescription}
        >
          <TelegramIcon size={32} round />
        </TelegramShareButton>

        <LineShareButton
          url={shareData.eventUrl}
          title={shareData.shareDescription}
        >
          <LineIcon size={32} round />
        </LineShareButton>

        <EmailShareButton
          url={shareData.eventUrl}
          subject={shareData.shareTitle}
          body={`${shareData.shareDescription}\n\n`}
        >
          <EmailIcon size={32} round />
        </EmailShareButton>
      </div>
      <button className={clubEventStyles.closeButton} onClick={onRequestClose}>
        Close
      </button>
      <p>
        Sharing to Facebook and Facebook Messenger are currently unavailable.
        Sorry about that!
      </p>
    </Modal>
  );
}

ShareQueue = ({ queueName, tourTag }) => {
  const [open, setOpen] = useState(false);
  const anchorRef = useRef(null);

  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen);
  };

  const handleClose = (event) => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }
    setOpen(false);
  };

  const link = `${window.location.origin}/j/${queueName}`;
  const quote = `Hi! Use ${link} to join my queue and get live updates.`;

  return (
    <div className={styles['share']}>
      <ButtonGroup
        reactour-selector={tourTag}
        variant="contained"
        className={styles['button-background']}
        ref={anchorRef}
        aria-label="split button"
      >
        <CopyButton {...{ link }} />
        <Button
          className={styles['button-background']}
          color="primary"
          size="small"
          onClick={handleToggle}
        >
          <ArrowDropDownIcon />
        </Button>
      </ButtonGroup>
      <Popper
        className={styles['popper']}
        open={open}
        anchorEl={anchorRef.current}
        transition
        disablePortal
        placement="bottom-end"
      >
        {({ TransitionProps, placement }) => (
          <Grow
            in={TransitionProps?.in}
            onEnter={TransitionProps?.onEnter}
            onExited={TransitionProps?.onExited}
            style={{
              transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
            }}
          >
            <Paper>
              <ClickAwayListener onClickAway={handleClose}>
                <MenuList>
                  <Typography>
                    <b>Share</b>
                  </Typography>
                  <Divider />
                  <MenuItem>
                    <FacebookShareButton
                      url={link}
                      quote={quote}
                      className={styles['share-button']}
                    >
                      <FacebookIcon size={24} round className={styles['share-icon']} />
                      <Typography>Facebook</Typography>
                    </FacebookShareButton>
                  </MenuItem>
                  <Divider />
                  <MenuItem>
                    <TwitterShareButton url={link} title={quote} className={styles['share-button']}>
                      <TwitterIcon size={24} round className={styles['share-icon']} />
                      <Typography>Twitter</Typography>
                    </TwitterShareButton>
                  </MenuItem>
                  <Divider />
                  <MenuItem>
                    <WhatsappShareButton
                      url={link}
                      title={quote}
                      className={styles['share-button']}
                    >
                      <WhatsappIcon size={24} round className={styles['share-icon']} />
                      <Typography>Whatsapp</Typography>
                    </WhatsappShareButton>
                  </MenuItem>
                </MenuList>
              </ClickAwayListener>
            </Paper>
          </Grow>
        )}
      </Popper>
    </div>
  );
}

ShareModal = (props) => {
  const [btnCopyText, setBtnCopyText] = useState(copy.defaultText);
  const [isUrlCopied, setUrlCopied] = useState(false);

  const copyURLToClipboard = () => {
    setUrlCopied(true);
  };

  useEffect(() => {
    if (isUrlCopied === true) {
      setBtnCopyText(copy.copiedText);

      setTimeout(() => {
        setBtnCopyText(copy.defaultText);
        setUrlCopied(false);
      }, 2000);
    }
  }, [isUrlCopied])

  const { movie } = props;
  let url = "";
  // console.log(movie.referral_id);
  if (window.location.hostname === "localhost") {
    url = `localhost:${window.location.port}/shared/${movie.referral_id}`;
  } else {
    url = `https://gophie.cam/shared/${movie.referral_id}`;
  }

  return (
    <>
      <Modal
        show={props.display}
        onHide={props.onHide}
        className="share-card"
        centered
        aria-labelledby="contained-modal-title-vcenter"
      >
        <Modal.Header closeButton>
          <Modal.Title>Share Movie</Modal.Title>
        </Modal.Header>
        <Modal.Body className="show-grid mt-5">
          <Container>
            <Row className="justify-content-between">
              <FacebookShareButton
                url={url}
                quote={movie.name}
                className="mb-2 mr-3"
              >
                <FacebookIcon size={50} round={true} />
              </FacebookShareButton>

              <TwitterShareButton
                url={url}
                title={movie.name}
                className="mb-2 mr-3"
              >
                <TwitterIcon size={50} round={true} />
              </TwitterShareButton>

              <WhatsappShareButton
                url={url}
                title={movie.name}
                className="mb-2 mr-3"
              >
                <WhatsappIcon size={50} round={true} />
              </WhatsappShareButton>

              <TelegramShareButton
                url={url}
                title={movie.name}
                className="mb-2 mr-3"
              >
                <TelegramIcon size={50} round={true} />
              </TelegramShareButton>

              <RedditShareButton url={url} title={movie.name} className="mb-2">
                <RedditIcon size={50} round={true} />
              </RedditShareButton>
            </Row>
            <Row className="justify-content-center mt-3 eoErth">
              <CopyToClipboard text={url}
                onCopy={() => copyURLToClipboard(true)}>
                <button
                  className={isUrlCopied ? copy.copiedClass : copy.defaultClass}
                  onClick={copyURLToClipboard}
                  type="button"
                >
                  {btnCopyText}
                </button>
              </CopyToClipboard>
            </Row>
          </Container>
        </Modal.Body>
      </Modal>
    </>
  );
}