react-share#WhatsappShareButton 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>
  );
}

Share = (props) => {
  const { url, socialCopy } = props;
  return (
    <ShareStyle>
      <h3>Share</h3>
      <ShareSection>
        <TwitterShareButton url={url} title={socialCopy}>
          <p>
            <i className="fab fa-twitter" />
            Twitter
          </p>
        </TwitterShareButton>
      </ShareSection>
      <ShareSection>
        <FacebookShareButton url={url} quote={socialCopy}>
          <p>
            <i className="fab fa-facebook-square" />
            Facebook
          </p>
        </FacebookShareButton>
      </ShareSection>
      <ShareSection>
        <WhatsappShareButton url={url} title={socialCopy}>
          <p>
            <i className="fab fa-whatsapp-square" />
            Whatsapp
          </p>
        </WhatsappShareButton>
      </ShareSection>
    </ShareStyle>
  );
}

getTab0() {
    const {activeTab} = this.state;
    if (activeTab !== 0) {
      return null;
    }
    return (
        <>
          <Row className="justify-content-center text-center">
            We thank you for your support. We will reach out to you for requests in your
            neighborhood.
          </Row>
          <Row className="justify-content-center mb-4">
            <img className="accept-confirm-img" alt='confirm'
                 src={require("assets/img/brand/volunteer-submit.jpeg")}/>
          </Row>
          <Row className="justify-content-center mb-4">
            <WhatsappShareButton
                url={config.uiUrl + '/volunteer'}
                title="Hey, I volunteered for #COVIDSOS. Volunteer now:"
                style={{
                  border: "#2dce89 1px solid",
                  borderRadius: "0.375rem",
                  padding: "0.625rem 1.25rem",
                  color: "#2dce89"
                }}
                className="btn btn-outline-success"
            >
              <i className="fab fa-whatsapp"/> Share with Friend
            </WhatsappShareButton>
          </Row>
        </>
    );
  }

Share = ({ socialConfig }) => {
  return (
    <div className="post-social">
      <h6 className="title is-6">Share:</h6>
      <FacebookShareButton
        url={socialConfig.config.url}
        className="button is-outlined is-rounded facebook"
      >
        <span className="icon">
          <i className="fab fa-facebook-f"></i>
        </span>
        <span className="text">Facebook</span>
      </FacebookShareButton>
      <TwitterShareButton
        url={socialConfig.config.url}
        className="button is-outlined is-rounded twitter"
        title={socialConfig.config.title}
        via="_rohitguptab"
      >
        <span className="icon">
          <i className="fab fa-twitter"></i>
        </span>
        <span className="text">Twitter</span>
      </TwitterShareButton>
      <WhatsappShareButton
        url={socialConfig.config.url}
        className="button is-outlined is-rounded whatsapp"
        title={socialConfig.config.title}
      >
        <span className="icon">
          <i className="fab fa-whatsapp"></i>
        </span>
        <span className="text">WhatsApp</span>
      </WhatsappShareButton>
    </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>
    )
}

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>
  );
}

Components = {
  Facebook: FacebookShareButton,
  Twitter: TwitterShareButton,
  Text: WhatsappShareButton,
  Email: EmailShareButton,
}

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 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>
  );
}

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>
  );
}

getPopup(isAuthorisedUser) {
    const {isPopupOpen, popupRequest, popupRequestDetails, isVolunteerListLoading, assignVolunteer, volunteerList, assignData} = this.state;
    const {name, location, why, requestStr, source, helpText} = popupRequestDetails;
    return (<Popup open={isPopupOpen} closeOnEscape closeOnDocumentClick
                   position="right center"
                   contentStyle={{
                     borderRadius: "0.375rem",
                     minWidth: "50%",
                     width: "unset",
                     padding: "0px"
                   }}
                   overlayStyle={{background: "rgba(0, 0, 0, 0.85)"}}
                   className="col-md-6"
                   onClose={() => this.setState(
                       {isPopupOpen: false, assignVolunteer: false, assignData: {}})}>
          {
            close => (
                <div className="request-details-popup pre-scrollable-full-height-popup">
                  <CardHeader>
                    <Row className="justify-content-end">
                      <Button onClick={close}
                              className="close btn-icon btn-link border-0 text-dark">
                        <i className="fas fa-times" style={{fontSize: '1rem'}}/>
                      </Button>
                    </Row>
                    <div hidden={popupRequestDetails.accept_success}>
                      <Row className="justify-content-start">
                        <Col>
                          <img alt='logo' src={require("assets/img/icons/requestAccept.png")}/>
                        </Col>
                      </Row>
                      <Row className="justify-content-start mt-2">
                        <Col className="h2">{name} nearby needs help!</Col>
                      </Row>
                      <Row className="justify-content-start">
                        <Col>
                          <div className="col-1 d-inline-block"
                               style={{height: "100%", verticalAlign: "top"}}>
                            <span className="h2 text-red">&#9432;&nbsp;</span>
                          </div>
                          <div className="col-10 d-inline-block">
                          <span>
                            {popupRequest.urgent === "yes" ? 'This is an urgent request.'
                                : 'This request needs to be completed in 1-2 days.'}
                          </span>
                            <br/>
                            <span>
                            {popupRequest.financial_assistance === 1
                                ? 'This help seeker cannot afford to pay.'
                                : 'This help seeker can afford to pay.'}
                          </span>
                          </div>
                        </Col>
                      </Row>
                    </div>
                  </CardHeader>
                  <CardBody hidden={popupRequestDetails.accept_success}>
                    {displayRequestCardDetails('Address', location)}
                    {displayRequestCardDetails('Received via', source)}
                    {displayRequestCardDetails('Reason', why)}
                    {displayRequestCardDetails('Help Required', requestStr)}
                    {isAuthorisedUser && popupRequest.requestor_mob_number
                    && displayRequestCardDetails('Requestor Mob', <a
                        href={'tel:'
                        + popupRequest.requestor_mob_number}>{popupRequest.requestor_mob_number}</a>)}
                    {isAuthorisedUser && popupRequest.volunteer_name && displayRequestCardDetails(
                        'Volunteer Name',
                        popupRequest.volunteer_name)}
                    {isAuthorisedUser && popupRequest.volunteer_mob_number
                    && displayRequestCardDetails('Volunteer Mob', <a
                        href={'tel:'
                        + popupRequest.volunteer_mob_number}>{popupRequest.volunteer_mob_number}</a>)}
                    {isAuthorisedUser && popupRequest.assignment_time && displayRequestCardDetails(
                        'Time of request assignment', <Badge
                            color="warning">{popupRequest.assignment_time}</Badge>)}
                    {
                      popupRequest.type === 'pending' && !isAuthorisedUser &&
                      <>
                        <Form role="form" onSubmit={this.acceptRequest}>
                          <div
                              className="custom-control custom-control-alternative custom-radio d-flex mb-3">
                            <div>
                              <input
                                  className="custom-control-input"
                                  id="IWillHelp"
                                  type="radio"
                                  value="yes"
                                  name="i_will_help"
                                  onClick={e => {
                                    this.setState({
                                      popupRequest: {
                                        ...popupRequest,
                                        accept: e.target.value === 'yes'
                                      }
                                    });
                                  }}/>
                              <label className="custom-control-label" htmlFor="IWillHelp">
                                <span>I will try my best to help this person</span>
                              </label>
                            </div>
                          </div>
                          <Col className="text-center">
                            <WhatsappShareButton
                                url={popupRequest.accept_link}
                                title={helpText}
                                style={{
                                  border: "#2dce89 1px solid",
                                  borderRadius: "0.375rem",
                                  padding: "0.625rem 1.25rem",
                                  color: "#2dce89"
                                }}
                                className="btn btn-outline-success"
                            >
                              <i className="fab fa-whatsapp"/> Share
                            </WhatsappShareButton>
                            <Button color="primary" type="submit"
                                    disabled={!popupRequest.accept}>I will help</Button>
                          </Col>
                        </Form>
                      </>
                    }
                    {
                      assignVolunteer && isVolunteerListLoading &&
                      <Col className="text-center h3">
                        Loading
                      </Col>
                    }
                    {
                      assignVolunteer && !isVolunteerListLoading &&
                      <Form role="form" onSubmit={this.assignVolunteerSubmit}>
                        {getVolunteerOptionsFormByDistance(volunteerList, popupRequest.latitude,
                            popupRequest.longitude, assignData.volunteer_id,
                            (e) => this.updateAssignVolunteerId(e.target.value))}
                        <div className="text-center">
                          <Button className="mt-4" color="primary" type="submit"
                                  disabled={this.isAssignSubmitDisabled()}>
                            Assign
                          </Button>
                        </div>
                      </Form>
                    }
                  </CardBody>
                  <CardBody hidden={!popupRequestDetails.accept_success} 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>
                  </CardBody>
                  <CardFooter hidden={popupRequestDetails.accept_success}>
                    <Row>
                      <Col xs={6} md={3} className="mb-4">
                        {getShareButtons(popupRequest.accept_link, helpText)}
                      </Col>
                      {isAuthorisedUser && this.getAuthorisedUserButtons(popupRequest, assignVolunteer)}
                    </Row>
                  </CardFooter>
                </div>
            )}
        </Popup>
    );
  }

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>
    </>
  );
}

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>
        </>
    )
  }

export default function Share({ lang, url, title }) {
  const [share, setShare] = useState(false);
  const [copy, setCopy] = useState(false);

  return (
    <div
      className='relative inline-block text-left'
      onMouseOver={() => setShare(true)}
      onMouseLeave={() => setShare(false)}
    >
      <div>
        <span className='rounded-md shadow-sm'>
          <button
            type='button'
            className='text-xl font-medium bg-green-700 text-white p-2 rounded inline-flex items-center focus:outline-none transition ease-in-out duration-150'
            id='share-menu'
          >
            <svg
              fill='none'
              stroke='currentColor'
              strokeLinecap='round'
              strokeLinejoin='round'
              strokeWidth='2'
              viewBox='0 0 24 24'
              className='w-6 h-6'
            >
              <path d='M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z' />
            </svg>
            {lang.share}
          </button>
        </span>
      </div>

      <div
        className={`${
          !share ? 'hidden' : 'block'
        } origin-top-right absolute right-0  w-56 rounded-md shadow-lg text-center`}
      >
        <div
          className='rounded-md bg-white shadow-xs'
          role='menu'
          aria-orientation='vertical'
          aria-labelledby='share-menu'
        >
          <div className='py-1'>
            <div
              className='block px-2 py-1 text-sm leading-5 text-gray-700'
              role='menuitem'
            >
              <FacebookShareButton url={url} quote={title}>
                <div className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'>
                  <svg
                    fill='none'
                    stroke='currentColor'
                    strokeLinecap='round'
                    strokeLinejoin='round'
                    strokeWidth='2'
                    viewBox='0 0 24 24'
                    className='w-6 h-6'
                  >
                    <path d='M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z' />
                  </svg>
                  <span>Facebook</span>
                </div>
              </FacebookShareButton>
            </div>
            <div
              className='block px-2 py-1 text-sm leading-5 text-gray-700'
              role='menuitem'
            >
              <TwitterShareButton url={url} title={title}>
                <div className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'>
                  <svg
                    fill='none'
                    stroke='currentColor'
                    strokeLinecap='round'
                    strokeLinejoin='round'
                    strokeWidth='2'
                    viewBox='0 0 24 24'
                    className='w-6 h-6'
                  >
                    <path d='M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z' />
                  </svg>
                  <span>Twitter</span>
                </div>
              </TwitterShareButton>
            </div>
          </div>
          <div
            className='block px-2 py-1 text-sm leading-5 text-gray-700'
            role='menuitem'
          >
            <LinkedinShareButton url={url} title={title}>
              <div className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'>
                <svg
                  fill='none'
                  stroke='currentColor'
                  strokeLinecap='round'
                  strokeLinejoin='round'
                  strokeWidth='2'
                  viewBox='0 0 24 24'
                  className='w-6 h-6'
                >
                  <path d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z' />
                </svg>
                <span>LinkedIn</span>
              </div>
            </LinkedinShareButton>
          </div>
          <div
            className='block px-2 py-1 text-sm leading-5 text-gray-700'
            role='menuitem'
          >
            <WhatsappShareButton url={url} title={title}>
              <div className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'>
                <svg
                  fill='none'
                  stroke='currentColor'
                  strokeLinecap='round'
                  strokeLinejoin='round'
                  strokeWidth='2'
                  viewBox='0 0 24 24'
                  className='w-6 h-6'
                >
                  <path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z' />
                </svg>
                <span>WhatsApp</span>
              </div>
            </WhatsappShareButton>
          </div>
          <div className='border-t border-gray-100'></div>

          <div
            className='block px-2 py-1 text-sm leading-5 text-gray-700'
            role='menuitem'
          >
            <EmailShareButton url={url} subject={title}>
              <div className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'>
                <svg
                  fill='none'
                  stroke='currentColor'
                  strokeLinecap='round'
                  strokeLinejoin='round'
                  strokeWidth='2'
                  viewBox='0 0 24 24'
                  className='w-6 h-6'
                >
                  <path d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z' />
                </svg>
                <span>{lang.email}</span>
              </div>
            </EmailShareButton>
          </div>
          <div className='border-t border-gray-300'></div>
          <div className='py-1'>
            <div
              className='block px-2 py-1 text-sm leading-5 text-gray-700'
              role='menuitem'
            >
              <button
                className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'
                onClick={() =>
                  copyUrl(url) ||
                  setCopy(true) ||
                  setTimeout(() => {
                    setCopy(false);
                  }, 3000)
                }
              >
                <svg
                  fill='none'
                  stroke='currentColor'
                  strokeLinecap='round'
                  strokeLinejoin='round'
                  strokeWidth='2'
                  viewBox='0 0 24 24'
                  className='w-6 h-6'
                >
                  <path d='M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3' />
                </svg>
                <span>{lang.copyLink}</span>
              </button>
              {copy && <div>{lang.copyLinkSuccess}</div>}
            </div>
          </div>
        </div>
      </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>
    </>
  )
}