@reach/dialog#Dialog JavaScript Examples

StyledDialog = styled(Dialog)`
@media (max-width: 700px) {
  width: 90vw;
}
.dialogTitle {
  @media (max-width: 700px) {
    font-size: 1.5rem;
  }
}

.dialogImageDescription {
  display : flex;
  img {
    max-height: 300px;
    max-width: 50%;
    margin-right: 3%;
  }
  span {
    padding-left: 2rem;
  }

  @media (max-width: 700px) {
    display : block;
    img {
      max-width : 100%;
    }
    span {
      padding-left: 0rem;
    }
  }
}
`

StyledDialog = styled(Dialog)`
@media (max-width: 600px) {
  width: 90vw;
}
.dialogTitle {
  @media (max-width: 600px) {
    font-size: 1.5rem;
  }
}

.shopname {
    display: none;
}

.dialogImageDescription {
  display : flex;
  img {
    max-height: 300px;
    max-width: 50%;
    margin-right: 3%;
  }
  span {
    padding-left: 2rem;
  }

  @media (max-width: 600px) {
    display : block;
    img {
      max-width : 100%;
    }
    span {
      padding-left: 0rem;
    }
  }
}
`

StyledDialog = styled(Dialog)`
@media (max-width: 600px) {
  width: 90vw;
}
.dialogTitle {
  @media (max-width: 600px) {
    font-size: 1.5rem;
  }
}

.shopname {
    display: none;
}

.dialogImageDescription {
  display : flex;
  img {
    max-height: 300px;
    max-width: 50%;
    margin-right: 3%;
  }
  span {
    padding-left: 2rem;
  }

  @media (max-width: 600px) {
    display : block;
    img {
      max-width : 100%;
    }
    span {
      padding-left: 0rem;
    }
  }
}
`

StyledDialog = styled(Dialog)`
@media (max-width: 600px) {
  width: 90vw;
  padding: 1.5rem;
  margin: 11vh auto 5vh auto;
}
.dialogTitle {
  @media (max-width: 600px) {
    font-size: 1.5rem;
  }
}

.shopname {
    display: none;
}

.dialogDescription {
height: 9rem;
overflow: auto;
border-bottom: 1px dotted #ccc;
margin-top: 0.5rem;
}

[data-reach-dialog-content] {
  @media (max-width: 600px) {

  }
}
.dialogImage{
  text-align:center;
  min-width: 40%;
}

.dialogImageDescription {
  display : flex;
  img {
    max-height : 14rem;
    max-width: 80%;
    margin-right: 3%;
  }
  span {
    padding-left: 0rem;
  }

  @media (max-width: 600px) {
    display : block;
    img {
      max-height : 12rem;
      margin: auto;

    }
    span {
      padding-left: 0rem;
    }
  }
}
`

export function Modal(props) {
  const { handleClose, header, children, visible, zIndex } = props

  const nullFxn = (e) => {
    e.preventDefault()
  }

  const onDismiss = handleClose || nullFxn

  return (
    <Dialog aria-label='List of your transactions' isOpen={visible} onDismiss={onDismiss}>
      {header === null ? (
        <>
          <div className='modal-no-header relative flex flex-col w-full px-10 py-20 sm:py-6 text-sm'>
            <div className='relative'>
              {children}

              <div className='modal-no-header--close justify-between text-lg'>
                {handleClose && (
                  <button
                    type='button'
                    onClick={handleClose}
                    className='text-inverse opacity-70 hover:opacity-100 trans outline-none focus:outline-none active:outline-none'
                  >
                    <FeatherIcon icon='x-circle' className='w-8 h-8' strokeWidth='0.09rem' />
                  </button>
                )}
              </div>
            </div>
          </div>
        </>
      ) : (
        <div className='relative message bg-default text-inverse flex flex-col w-full sm:rounded-xl border-secondary sm:border-2 sm:shadow-4xl h-full sm:h-auto'>
          <div className='relative flex justify-between w-full border-b-2 border-secondary px-10 py-6 text-lg'>
            <h6>{header}</h6>

            {handleClose && (
              <button
                type='button'
                onClick={handleClose}
                className='text-inverse opacity-70 hover:opacity-100 trans outline-none focus:outline-none active:outline-none'
              >
                <FeatherIcon icon='x-circle' className='w-8 h-8' strokeWidth='0.09rem' />
              </button>
            )}
          </div>

          <div className='relative flex flex-col w-full px-10 py-6 text-sm'>{children}</div>
        </div>
      )}
    </Dialog>
  )
}

Modal = (props) => {
  const { handleClose, header, children, visible, zIndex } = props

  const nullFxn = (e) => { e.preventDefault() }

  const onDismiss = handleClose || nullFxn

  return <>
    <Dialog
      aria-label='List of your transactions'
      isOpen={visible}
      onDismiss={onDismiss}
    >
      <div
        className='relative message bg-default text-inverse flex flex-col w-full sm:rounded-xl border-secondary sm:border-2 sm:shadow-4xl h-full sm:h-auto'
      >
        <div
          className='relative flex justify-between w-full border-b-2 border-secondary px-10 py-6 text-lg'
        >
          <h6
          >
            {header}
          </h6>

          {handleClose && <button
            type='button'
            onClick={handleClose}
            className='text-inverse opacity-70 hover:opacity-100 trans outline-none focus:outline-none active:outline-none'
          >
            <FeatherIcon
              icon='x-circle'
              className='w-8 h-8'
              strokeWidth='0.09rem'
            />
          </button>}
        </div>

        <div
          className='relative flex flex-col w-full px-10 py-6 text-sm'
        >
          {children}
        </div>
      </div>
    </Dialog>
  </>
}

ProposalTransactionModal = (props) => {
  const { isOpen, closeModal, tx } = props

  const { t } = useTranslation()
  const { provider } = useOnboard()
  const [proposalId, setProposalId] = useState()

  const showClose = tx && (tx.error || tx.cancelled)
  const showNavigateToProposal = tx && !tx.error && tx.completed && proposalId !== undefined

  useEffect(() => {
    const getProposalId = async () => {
      const hash = tx.hash
      await tx.ethersTx.wait()
      const receipt = await provider.getTransactionReceipt(hash)
      const governorAlphaInterface = new ethers.utils.Interface(GovernorAlphaABI)
      const proposalCreatedEvent = receipt.logs.map((log) =>
        governorAlphaInterface.decodeEventLog('ProposalCreated', log.data)
      )[0]

      setProposalId(proposalCreatedEvent.id)
    }

    if (tx && tx.completed && !tx.error && !tx.cancelled) {
      getProposalId()
    }
  }, [tx, tx?.completed, tx?.error])

  const onClose = () => {
    if (tx && (tx.completed || tx.error || tx.cancelled)) {
      closeModal()
    }
  }

  return (
    <Dialog aria-label='Proposal Summary' isOpen={isOpen} onDismiss={onClose}>
      <Banner
        defaultBorderRadius={false}
        className='flex flex-col relative text-center rounded-b-lg sm:rounded-lg sm:max-w-3/4 mx-auto'
      >
        {showClose && (
          <button
            className='absolute right-4 top-4 close-button trans text-inverse hover:opacity-30'
            onClick={onClose}
          >
            <FeatherIcon icon='x' className='w-6 h-6' />
          </button>
        )}
        <TxStatus tx={tx} />
        {showNavigateToProposal && (
          <ButtonLink
            Link={Link}
            className='mt-8'
            href='/proposals/[id]'
            as={`/proposals/${proposalId}`}
          >
            {t('viewProposal')}
          </ButtonLink>
        )}
      </Banner>
    </Dialog>
  )
}

function UpsellDialog({ isShowing, url, close }) {
  // usePodia()

  return (
    <Dialog
      className="z-50 p-10 rounded shadow-xl text-center w-5/6 lg:w-1/2"
      isOpen={isShowing}
      onDismiss={close}
    >
      <h2 className="arial text-2xl lg:text-4xl text-gray-700">
        Get a 2nd Course for <strong className="text-gray-800">40% Off</strong>
      </h2>
      <p className="text-lg mb-10 text-gray-700">
        Bundle two courses together and{' '}
        <strong className="text-green-400">save</strong>!
      </p>

      <div className="lg:w-4/5 mx-auto grid grid-cols-2 col-gap-1 text-gray-600 leading-none mb-10">
        {/* part 1 */}
        <div className="bg-blue-100 rounded-lg">
          <img
            src="https://scotch-res.cloudinary.com/image/upload/v1594571945/d2e337a4f6900f8d0798c596eb0607a8e0c2fbddb6a7ab7afcd60009c119d4c7_evfnlk.png"
            alt="10 React Apps Part 1"
            className="rounded-t-lg"
          />
          <h2 className="arial text-blue-600 p-4 leading-snug">
            Make 10 React Apps <strong className="block">(Part 1)</strong>
          </h2>
        </div>

        {/* part 2 */}
        <div className="bg-purple-100 rounded-lg">
          <img
            src="https://scotch-res.cloudinary.com/image/upload/v1594571945/d2e337a4f6900f8d0798c596eb0607a8e0c2fbddb6a7ab7afcd60009c119d4c7_1_nq11gx.png"
            alt="10 React Apps Part 2"
            className="rounded-t-lg"
          />
          <h2 className="arial text-purple-600 p-4 leading-snug">
            Make 10 React Apps <strong className="block">(Part 2)</strong>
          </h2>
        </div>
      </div>

      {/* purchase the bundle */}
      <a
        href="https://learn.better.dev/make-react-apps-bundle-a-and-b/buy"
        className="text-green-100 bg-green-500 block xl:w-1/2 mx-auto py-3 px-6 mb-4 rounded shadow hover:shadow-xl text-xl lg:text-2xl transition duration-75 ease-in"
      >
        <span>
          Buy Bundle{' '}
          <span className="line-through ml-2 mr-1 opacity-75">$99</span>
          <strong className="text-white">$79</strong>
        </span>
        <span className="block mt-1 opacity-50 text-xs">
          30-day money back guarantee
        </span>
      </a>

      {/* purchase 1 */}
      <a
        href={`${url}/buy`}
        className="text-center block text-gray-700 hover:text-gray-800 hover:underline"
      >
        No thanks - Purchase 1 Course
      </a>
    </Dialog>
  )
}

DialogComponent = props => (
  <Dialog aria-label="Popup">
    <StyledDialogOverlay>
      <StyledDialogContent aria-label="Dialog">{props.children}</StyledDialogContent>
    </StyledDialogOverlay>
  </Dialog>
)

StyledDialog = styled(Dialog)`
@media (max-width: 600px) {
  width: 90vw;
  padding: 1.5rem;
  margin: 11vh auto 5vh auto;
}
.dialogTitle {
  @media (max-width: 600px) {
    font-size: 1.5rem;
  }
}

.shopname {
    display: none;
}

.dialogDescription {
height: 25rem;
overflow: auto;
border-bottom: 1px dotted #ccc;
margin-top: 0.5rem;
}

[data-reach-dialog-content] {
  @media (max-width: 600px) {

  }
}
.dialogImage{
  text-align:center;
  min-width: 40%;
}

.dialogImageDescription {
  display : flex;
  img {
    max-height : 14rem;
    max-width: 80%;
    margin-right: 3%;
  }
  span {
    padding-left: 0rem;
  }

  @media (max-width: 600px) {
    display : block;
    img {
      max-height : 12rem;
      margin: auto;

    }
    span {
      padding-left: 0rem;
    }
  }
}
`

StyledDialog = styled(Dialog)`
width: 20vw;
@media (max-width: 600px) {
  width: 90vw;
  padding: 1.5rem;
  margin: 11vh auto 5vh auto;
}
`

StyledDialog = styled(Dialog)`
@media (max-width: 600px) {
  width: 90vw;
}
.dialogTitle {
  @media (max-width: 600px) {
    font-size: 1.5rem;
  }
}

.shopname {
    display: none;
}

.dialogDescription {
height: 9rem;
overflow: auto;
border-bottom: 1px dotted #ccc;
margin-top: 0.5rem;
}

[data-reach-dialog-content] {
  @media (max-width: 600px) {

  }
}
.dialogImage{
  text-align:center;
  min-width: 40%;
}



.dialogImageDescription {
  display : flex;
  img {
    max-height : 14rem;
    max-width: 80%;
    margin-right: 3%;
  }
  span {
    padding-left: 0rem;
  }

  @media (max-width: 600px) {
    display : block;
    img {
      max-height : 12rem;
      margin: auto;

    }
    span {
      padding-left: 0rem;
    }
  }
}
`

StyledDialog = styled(Dialog)`
@media (max-width: 600px) {
  width: 90vw;
}
.dialogTitle {
  @media (max-width: 600px) {
    font-size: 1.5rem;
  }
}

.shopname {
    display: none;
}

.dialogDescription {
height: 9rem;
overflow: auto;
border-bottom: 1px dotted #ccc;
margin-top: 0.5rem;
}

[data-reach-dialog-content] {
  @media (max-width: 600px) {

  }
}
.dialogImage{
  text-align:center;
  min-width: 40%;
}



.dialogImageDescription {
  display : flex;
  img {
    max-height : 14rem;
    max-width: 80%;
    margin-right: 3%;
  }
  span {
    padding-left: 0rem;
  }

  @media (max-width: 600px) {
    display : block;
    img {
      max-height : 12rem;
      margin: auto;

    }
    span {
      padding-left: 0rem;
    }
  }
}
`

AddShopToCartButton = ({ details }) => {
    const [globalState, globalActions] = useGlobal();
    const [showDialog, setShowDialog] = React.useState(false);
    const openDialog = () => {
        setShowDialog(true);
    }
    const closeDialog = () => setShowDialog(false);

    React.useEffect(() => {
        const allStores = globalState.cfSavedStoresList['stores'];
        if (globalState.authenticated && !allStores) {
            globalActions.getSavedStores();
        }
    }, [globalState.cfSavedStoresList['stores'], globalState.authenticated]);

    const saveShop = () => {
        if (globalActions.findInSavedStores(details)) return;
        const shopToSave = {
            emprezzoID: details.emprezzoID,
            shopName: details.storeName,
            photo: details.storeProfileImage,
            productURL: details.storeURL,
            description: details.description,
        }
        globalActions.addToSavedStores(shopToSave);
        openDialog();
    }

    return (
        <div style={{display: "inline", fontSize: "x-large"}}>
            <button onClick={globalState.authenticated ? saveShop : globalActions.openAuthDialog} style={{cursor: "pointer", backgroundColor: "white", color:"#C04CFD", border: "white", outline: "none"}}>
                {globalActions.findInSavedStores(details) && <FaStar />}
                {!globalActions.findInSavedStores(details) && <FaRegStar />}
            </button>
            <ShopifyAuthentication />
            <Dialog isOpen={showDialog} onDismiss={closeDialog}>
                <button className="close-button" onClick={closeDialog} style={{ float: "right", cursor: "pointer" }}>
                    <span aria-hidden>X</span>
                </button>
                <div>Store saved Successfully. <br /><a href="/savedstores">Click Here</a> to see the saved store list</div>
                <br />
                <div>
                    <button className="button" onClick={() => { closeDialog(); }}>Close</button>
                </div>
            </Dialog>
        </div>
    );
}

Authentication = (props) => {

    const { signOut, authenticated } = useBlockstack();
    const authOptions = useConnectOptions(connectOptions);
    const signIn = useCallback(() => {
        showBlockstackConnect(authOptions)
    }, [authOptions])

    const { refreshCart } = useContext(CartContext);
    const cartPersistPath = "emprezzocart"
    const [cartContent, setCartContent] = useFile(cartPersistPath);
    const [cartName, setCartName] = React.useState("");

    const allCarts = cartContent ? JSON.parse(cartContent || []) : []

    const persistCart = () => {
        const newItem = {
            name: cartName,
            cart: (isBrowser() && window.localStorage.getItem('cart')) ? window.localStorage.getItem('cart') : null
        }
        allCarts.push(newItem)
        console.log("allCarts", allCarts)
        setCartContent(JSON.stringify(allCarts))
    }
    const loadCart = (name) => {
        if (isBrowser()) {
            const foundCart = _.filter(allCarts, item => item.name === name)
            if (foundCart && foundCart.length > 0) {
                window.localStorage.setItem('cart', foundCart[0].cart);
                refreshCart();
            }
        }
    }

    const [showDialog, setShowDialog] = React.useState(false);
    const openDialog = () => {
        setCartName("");
        setShowDialog(true);
    }
    const closeDialog = () => setShowDialog(false);

    return (
        <div>
            <button
                className="button"
                disabled={!signIn && !signOut}
                onClick={!authenticated ? signIn : signOut}
            >
                {!authenticated ? 'Sign In' : authenticated ? 'Log Out' : '...'}
            </button>
            {authenticated &&
                <>
                    <button className="button" onClick={openDialog}>Persist(Save) Current Cart</button>                    
                    {allCarts && allCarts.length > 0 && <Title>Existing Cart(s) List</Title>}
                    {allCarts && allCarts.map((thisCart) => (
                        <StyledList>
                            <li>
                                <span>{thisCart.name}</span>
                                <button className="button" onClick={() => loadCart(thisCart.name)}>Load Cart</button>
                            </li>
                        </StyledList>
                    ))} 
                    <Dialog isOpen={showDialog} onDismiss={closeDialog}>
                        <button className="close-button" onClick={closeDialog} style={{ float: "right", cursor: "pointer" }}>
                            <span aria-hidden>X</span>
                        </button>
                        <div>
                            <label>Cart Name : </label>
                            <input value={cartName} onChange={e => setCartName(e.target.value)} />
                        </div>
                        <br />
                        <div>
                            <button className="button" onClick={() => { persistCart(); closeDialog(); }}>Persist(Save) Cart</button>
                        </div>
                    </Dialog>
                </>
            }
        </div>
    );
}

StyledDialog = styled(Dialog)`
@media (max-width: 600px) {
  width: 90vw;
  padding: 1.5rem;
  margin: 11vh auto 5vh auto;
}
.dialogTitle {
  @media (max-width: 600px) {
    font-size: 1.5rem;
  }
}

.shopname {
    display: none;
}

.dialogDescription {
height: 9rem;
overflow: auto;
border-bottom: 1px dotted #ccc;
margin-top: 0.5rem;
}

[data-reach-dialog-content] {
  @media (max-width: 600px) {

  }
}
.dialogImage{
  text-align:center;
  min-width: 40%;
}

.dialogImageDescription {
  display : flex;
  img {
    max-height : 14rem;
    max-width: 80%;
    margin-right: 3%;
  }
  span {
    padding-left: 0rem;
  }

  @media (max-width: 600px) {
    display : block;
    img {
      max-height : 12rem;
      margin: auto;

    }
    span {
      padding-left: 0rem;
    }
  }
}
`

DisplayCart = () => {
    const { signOut, authenticated } = useBlockstack();
    const authOptions = useConnectOptions(connectOptions);
    const signIn = useCallback(() => {
        showBlockstackConnect(authOptions)
    }, [authOptions])
    const cartPersistPath = "emprezzocart"
    const [cartContent, setCartContent] = useFile(cartPersistPath);
    const [cartName, setCartName] = React.useState("");
    const allCarts = cartContent ? JSON.parse(cartContent || []) : []

    const { total, cartItems, itemCount, clearCart, refreshCart, checkout, handleCheckout } = useContext(CartContext);

    const [loaded, setLoaded] = React.useState(false)
    React.useEffect(() => {
        if (!loaded) {
            setLoaded(true);
            refreshCart();
        }
    }, [loaded]);

    const persistCart = () => {
        const newItem = {
            name: cartName,
            cart: (isBrowser() && window.localStorage.getItem('cart')) ? window.localStorage.getItem('cart') : null
        }
        allCarts.push(newItem)
        console.log("allCarts", allCarts)
        setCartContent(JSON.stringify(allCarts))
    }
    const loadCart = (name) => {
        if (isBrowser()) {
            const foundCart = _.filter(allCarts, item => item.name === name)
            if (foundCart && foundCart.length > 0) {
                window.localStorage.setItem('cart', foundCart[0].cart);
                refreshCart();
            }
        }
    }

    const [showDialog, setShowDialog] = React.useState(false);
    const openDialog = () => {
        setCartName("");
        setShowDialog(true);
    }
    const closeDialog = () => setShowDialog(false);

    return (
        <Wrapper>
            {cartItems.length <= 0 &&
                <div>Your cart is empty</div>
            }
            {cartItems.length > 0 &&
                <CartWrapper>
                    <CartSection>
                        <CartItems style={{borderRight: "1px solid lightgray"}}>
                            <h3>Products</h3>
                            {_.filter(cartItems, item => item.type == null).map(product => <CartItem key={product.id} product={product} />)}
                        </CartItems>
                        <CartItems>
                            <h3>Saved Shops</h3>
                            {_.filter(cartItems, item => item.type && item.type == "shop").map(shop => <CartItemShop key={shop.id} shop={shop} />)}
                        </CartItems>
                    </CartSection>
                    <CartSummary>
                        <CartSummaryBody>
                            <CartSummaryElement>
                                <div>Total Items: </div><h4>{itemCount}</h4>
                            </CartSummaryElement>
                            <CartSummaryElement>
                                <div>Total Payment: </div><h3>{formatNumber(total)}</h3>
                            </CartSummaryElement>
                            <CartSummaryElement>
                                <div>
                                    <button
                                        className="button"
                                        disabled={!signIn && !signOut}
                                        onClick={!authenticated ? signIn : openDialog}
                                    >
                                        Save Current Cart
                                    </button>
                                    <button type="button" className="button" onClick={clearCart}>CLEAR</button>
                                </div>
                            </CartSummaryElement>
                        </CartSummaryBody>
                    </CartSummary>
                </CartWrapper>
            }
            {authenticated &&
                <CartWrapper style={{paddingTop: "0"}}>
                    <div style={{ display: "flex" }}>
                        <div><button className="button" disabled={!signIn && !signOut} onClick={signOut}>Logout</button></div>
                        {allCarts && allCarts.length > 0 && <Title>Existing Cart(s) List</Title>}
                    </div>
                    {allCarts && allCarts.map((thisCart) => (
                        <StyledList>
                            <li>
                                <span>{thisCart.name}</span>
                                <button className="button" onClick={() => loadCart(thisCart.name)}>Load Cart</button>
                            </li>
                        </StyledList>
                    ))}
                    <Dialog isOpen={showDialog} onDismiss={closeDialog}>
                        <button className="close-button" onClick={closeDialog} style={{ float: "right", cursor: "pointer" }}>
                            <span aria-hidden>X</span>
                        </button>
                        <div>
                            <label>Cart Name : </label>
                            <input value={cartName} onChange={e => setCartName(e.target.value)} />
                        </div>
                        <br />
                        <div>
                            <button className="button" onClick={() => { persistCart(); closeDialog(); }}>Persist(Save) Cart</button>
                        </div>
                    </Dialog>
                </CartWrapper>
            }
        </Wrapper>
    );
}

TopShopifyStores = ({ data }) => {
  const { edges } = data.allMysqlMainView;
  const maxItems = 20;
  const [limit, setLimit] = React.useState(maxItems);
  const [showMore, setShowMore] = React.useState(true);
  const [showDialog, setShowDialog] = React.useState(false);
  const [dialogText, setDialogText] = React.useState();

  const [filterPaypalShopID, setFilterPaypalShopID] = React.useState(false);
  const [filterFreeShipText, setFilterFreeShipText] = React.useState(false);
  const [filterPayPalVenmoSupport, setFilterPayPalVenmoSupport] = React.useState(false);
  const [filterBuyNowPayLater, setFilterBuyNowPayLater] = React.useState(false);
  const [filterText, setFilterText] = React.useState("");

  const [sliderAvgPrice, setSliderAvgPrice] = React.useState([0, 0]);
  const [sliderPriceRange, setSliderPriceRange] = React.useState([0, 0]);

  const [sortBy, setSortBy] = React.useState("GlobalRank_Change");

  const changeSortBy = (e) => { setSortBy(e.target.value) }

  const isMobile = useMediaQuery({ query: '(max-width: 600px)' })

  const increaseLimit = () => {
    setLimit(limit + maxItems);
  }

  let combinedEdges = [];

  //Creating a new dataset with original nodes and required columns from PayNShip and allMysqlShopifyProductSummary
  edges.map((edge) => {
    let newNode = {
      name: edge.node.name,
      slug: edge.node.UserName,
      ...edge.node
    }
    const inputID = edge.node.AlexaURL;
    const rowDataViewEdges = data.allMysqlDataView.edges;
    var filteredDataView = _.filter(rowDataViewEdges, ({ node }) => (node.AlexaURL == inputID))
    if (filteredDataView.length > 0) {
      newNode = {
        ...newNode,
        ...filteredDataView[0].node
      }
    }
    const rowPayNShipEdges = data.allMysqlPayNShip.edges;
    var filteredPayNShip = _.filter(rowPayNShipEdges, ({ node }) => (node.URL == inputID))
    if (filteredPayNShip.length > 0) {
      newNode = {
        ...newNode,
        ...filteredPayNShip[0].node
      }
    }
    const rowShopifyProductSummaryEdges = data.allMysqlShopifyProductSummary.edges;
    var filteredShopifyProductSummary = _.filter(rowShopifyProductSummaryEdges, ({ node }) => (node.VendorURL == inputID))
    if (filteredShopifyProductSummary.length > 0) {
      newNode = {
        ...newNode,
        ...filteredShopifyProductSummary[0].node
      }
    }
    combinedEdges.push(newNode);
  })

  if (sliderAvgPrice[0] == 0 && sliderAvgPrice[1] == 0) {
    var minPriceAvg = _.minBy(combinedEdges, 'PriceAvg')
    var maxPriceAvg = _.maxBy(combinedEdges, 'PriceAvg')
    if(minPriceAvg && maxPriceAvg) {setSliderAvgPrice([minPriceAvg.PriceAvg, maxPriceAvg.PriceAvg])}
  }
  combinedEdges = _.filter(combinedEdges, item => sliderAvgPrice[0] <= item.PriceAvg && item.PriceAvg <= sliderAvgPrice[1])

  if (sliderPriceRange[0] == 0 && sliderPriceRange[1] == 0 && combinedEdges.length > 0) {
    var minPriceRange = _.minBy(combinedEdges, 'PriceMin')
    var maxPriceRange = _.maxBy(combinedEdges, 'PriceMax')
    if(minPriceRange && maxPriceRange) {setSliderPriceRange([minPriceRange.PriceMin, maxPriceRange.PriceMax])}
  }
  combinedEdges = _.filter(combinedEdges, item => sliderPriceRange[0] <= item.PriceMax && item.PriceMax <= sliderPriceRange[1])

  const handerSliderAvgPriceChange = (event, newValue) => {
    setSliderAvgPrice(newValue);
  }
  const handerSliderPriceRangeChange = (event, newValue) => {
    setSliderPriceRange(newValue);
  }

  //Now sorting (desc) based on TotalFollowers
  let listEdges = _.sortBy(combinedEdges, obj => sortBy == "GlobalRank" ? obj[sortBy] : -obj[sortBy])

  //Apply filters if any of them is checked
  if (filterPaypalShopID) {
    listEdges = _.filter(listEdges, item => item.PaypalShopID != null)
  }
  if (filterFreeShipText) {
    listEdges = _.filter(listEdges, item => item.FreeShipText != null && item.FreeShipText.trim().length > 0)
  }
  if (filterPayPalVenmoSupport) {
    listEdges = _.filter(listEdges, item => item.PaypalVenmoSupport != null)
  }
  if (filterBuyNowPayLater) {
    listEdges = _.filter(listEdges, item => item.AfterPay || item.Klarna || item.Affirm)
  }
  if (filterText && filterText.length > 0) {
    listEdges = _.filter(listEdges, item =>
      (item.name && item.name.toLowerCase().indexOf(filterText.toLowerCase()) >= 0)
      || (item.about && item.about.toLowerCase().indexOf(filterText.toLowerCase()) >= 0)
      || (item.tags && item.tags.toLowerCase().indexOf(filterText.toLowerCase()) >= 0)
      || (item.category && item.category.toLowerCase().indexOf(filterText.toLowerCase()) >= 0)
    )
  }

  //Now limiting the items as per limit
  listEdges = _.slice(listEdges, 0, limit)

  const openMoreDialog = (node) => {
    let dialogContent = "";
    dialogContent += "<h1>" + node.name + "</h1>";
    dialogContent += "<p>" + (node.about || "No Description Available") + "</p>";
    dialogContent += "<p>" + (node.tags || "") + "</p>";
    dialogContent += "<a href='" + node.AlexaURL + "'>Go to " + node.name + "</a><br/><br/>";
    setDialogText(dialogContent);
    setShowDialog(true);
  }

  const closeMoreDialog = () => setShowDialog(false);

  const defaultImageOnError = (e) => { e.target.src = "https://source.unsplash.com/100x100/?abstract," + (Math.random() * 1000) }

  const renderProfilePicURL = (node) => {
    if (node.mysqlImages && node.mysqlImages.length > 0) {
      return (
        <Image fluid={node.mysqlImages[0].childImageSharp.fluid} style={{ width: "50px", margin: '0px' }} title={node.about} alt={node.about} />
      );
    } else if (node.ProfilePicURL) {
      return (
        <img src={node.ProfilePicURL} className="profileimage" onError={defaultImageOnError} style={{ width: "50px", margin: '0px' }} title={node.about} alt={node.about} />
      );
    } else {
      return (
        <img src={"https://source.unsplash.com/100x100/?abstract," + (Math.random() * 1000)} className="profileimage" style={{ width: "50px", margin: '0px' }} title={node.about} alt={node.about} />
      );
    }
  }

  return (
    <Layout title={'Top Shopify Stores | Shop the most popular stores'} description='Discover top Shopify stores. Shop the best and most popular Shopify shop on emprezzo.'>
      <Header title="? Discover top Shopify stores" subtitle=""></Header>
      <Dialog isOpen={showDialog} onDismiss={closeMoreDialog}>
        <span dangerouslySetInnerHTML={{ __html: dialogText }} />
        <button onClick={closeMoreDialog}>
          Close
        </button>
      </Dialog>
      <ShopsWrapper>
        <div className="intro_text">
          <h3>Browse top Shopify stores</h3>
          <p>Discover top Shopify sellers based upon organic search traffic and social media activity.</p>
        </div>
        <div style={{ display: "flex", width: "100%" }}>
          <label>Filter Results:
            <input type="text"
              value={filterText}
              onChange={(e) => setFilterText(e.target.value)}
            />
          </label>
        </div>
        <div style={{ display: "flex", width: "100%" }}>
          <label>
            <input type="checkbox" style={{ margin: "0.5rem" }}
              checked={filterPaypalShopID}
              onChange={() => setFilterPaypalShopID(!filterPaypalShopID)}
            />
          PayPal
        </label>
          <label>
            <input type="checkbox" style={{ margin: "0.5rem" }}
              checked={filterFreeShipText}
              onChange={() => setFilterFreeShipText(!filterFreeShipText)}
            />
          Free Shipping
        </label>
          <label>
            <input type="checkbox" style={{ margin: "0.5rem" }}
              checked={filterPayPalVenmoSupport}
              onChange={() => setFilterPayPalVenmoSupport(!filterPayPalVenmoSupport)}
            />
          Venmo
        </label>
          <label>
            <input type="checkbox" style={{ margin: "0.5rem" }}
              checked={filterBuyNowPayLater}
              onChange={() => setFilterBuyNowPayLater(!filterBuyNowPayLater)}
            />
          Buy now, pay later
        </label>
        </div>
        <div style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}>
          Display by
          <select value={sortBy} onChange={changeSortBy}>
            <option value="GlobalRank">Traffic rank</option>
            <option value="GlobalRank_Change">Rank change</option>
            <option value="TotalFollowers">Total fans</option>
          </select>
        </div>
        <div style={{ width: "80%", display: "flex" }}>
          <span style={{ width: "20%" }}>Average Price : </span>
          <Slider
            value={sliderAvgPrice}
            onChange={handerSliderAvgPriceChange}
            min={0}
            max={sliderAvgPrice[1] + 50}
            valueLabelDisplay="auto"
            aria-labelledby="range-slider-avg"

          />
        </div>
        <div style={{ width: "80%", display: "flex" }}>
          <span style={{ width: "20%" }}>Price Range : </span>
          <Slider
            value={sliderPriceRange}
            onChange={handerSliderPriceRangeChange}
            min={0}
            max={sliderPriceRange[1] + 50}
            valueLabelDisplay="auto"
            aria-labelledby="range-slider-range"
          />
        </div>
        <TableWrapper>
          <StickyTableWrapper>
            <TableStickyHeader>
              <thead>
                <tr>
                  <th style={{ width: "3%" }}><strong>#</strong></th>
                  <th style={{ width: "3%" }}></th>

                  <th><strong>Store</strong></th>
                  {!isMobile &&
                    <>
                      <th style={{ width: "20%" }}></th>
                      <th><strong>TrafficRank</strong></th>
                    </>
                  }
                  <th><strong>TotalFollowers</strong></th>
                  {!isMobile &&
                    <>
                      <th><strong>Avg Price</strong></th>
                      <th><strong>Price Range</strong></th>
                      <th><strong>Rank Change</strong></th>
                    </>
                  }
                </tr>
              </thead>
              <tbody>
                {listEdges.map((node, index) => (
                  <tr key={index} id={`post-${index}`}>
                    <td>{index + 1}</td>
                    <td><a href="javascript:void(0)" onClick={() => openMoreDialog(node)}>&gt;&gt;</a></td>
                    <td>
                      <Link to={`/shops/${node.UserName}/`}>
                        {renderProfilePicURL(node)}
                      </Link>
                    </td>
                    {!isMobile &&
                      <>
                        <td><Link to={`/shops/${node.UserName}/`} title={node.name}>{node.name}</Link></td>
                        <td>{node.GlobalRank}</td>
                      </>
                    }
                    <td>{node.TotalFollowers}</td>
                    {!isMobile &&
                      <>
                        <td>${(node.PriceAvg || 0)}</td>
                        <td>${(node.PriceMin || 0)}{" - "}${(node.PriceMax || 0)}</td>
                        <td>{node.GlobalRank_Change}</td>
                      </>
                    }
                  </tr>
                ))}
              </tbody>
            </TableStickyHeader>
          </StickyTableWrapper>
        </TableWrapper>

      </ShopsWrapper >
      { showMore && listEdges.length > 0 && listEdges.length < edges.length &&
        <div className="center">
          <button className="button" onClick={increaseLimit}>
            Load More
          </button>
        </div>
      }
      <ShopsWrapper>
        <div className="intro_text">
          <h3>Discover top Shopify stores of 2020</h3>
          <p>Find the top Shopify stores by traffic & social media activity. See some of the best Shopify store examples.</p><p>Search in header for more Shopify stores or <a href="/randomshop">discover a shop</a></p>
          <h3>How is the list of top Shopify stores ranked?</h3>
          <p>The stores are ranked based upon their SocialScore and overall web rank. The social score is derived from factors such as followers, fans, and activity on social media accounts. Web rank is based upon the websites estimated search engine ranking, as well as average time on site by visitors.</p>
          <h3>What are some great Shopify stores examples? </h3>
          <p>This list is an excellent resource for seeing examples of Shopify stores. These are some of the most popular Shopify stores and are great for getting ideas for your own store.</p>
          <h3>What are Shopify stores?</h3>
          <p>Shpoify stores are online stores running on the Shopify ecommece platorm. They are typically indpendent businesses selling directly to customers. The sites are hosted by Shopify, which generally handles the payment as well, making Shopify sites safe and secure.</p>
          <h3>How many Shopify stores are there?</h3>
          <p>As of July 2020, there are approximately 1,422,815 live Shopify sites. 3.6% of the top 1M sites are powerd by Shopify. 5.29% of the top 10k sites are powered by Shopify. </p>
        </div>
      </ShopsWrapper>
    </Layout >
  );
}

AlgoliaProductItem = (props) => {
  const [globalState, globalActions] = useGlobal();
  const [showDialog, setShowDialog] = React.useState(false);
  const openDialog = () => setShowDialog(true);
  const closeDialog = () => setShowDialog(false);
  const [showMessageDialog, setShowMessageDialog] = React.useState(false);
  const openMessageDialog = () => setShowMessageDialog(true);
  const closeMessageDialog = () => setShowMessageDialog(false);

  //console.log("**** props=AlgoliaProductItem=", props)
  const addToCartWrapper = hit => {
    const hitToProduct = {
      id: hit.objectID,
      name: hit.name,
      price: currentPrice,
      photo: hit.imageURL,
      productURL: hit.productURL,
      emprezzoID: hit.emprezzoID,
      shopName: hit.shopName,
      description: hit.description,
    }
    globalActions.addToSavedProducts(hitToProduct);
    openMessageDialog();
  }

  const [currentPrice, setCurrentPrice] = React.useState(props.hit.price)
  const [currentVariantText, setCurrentVariantText] = React.useState()
  const handleVariantChange = (event) => {
    setCurrentPrice(event.target.value)
    setCurrentVariantText(event.target[event.target.selectedIndex].text)
  }

  const convertToSelectList = (variants, variantPrices, variantIDs) => {
    if (variants == null) return;
    if (variants.toLowerCase() == "default title") return;
    const list = variants.split(",");
    const prices = variantPrices.split(",");
    const IDs = variantIDs.split(",");
    return (
      <div>Options: <select onChange={event => handleVariantChange(event)}>
        {list.map((item, index) => (
          <option key={index} data={IDs[index]} value={prices[index] ? prices[index].trim() : 0}>{item}</option>
        ))}
      </select>
      </div>
    )

  }

  return (
    <Wrapper>
      {props && props.hit &&
        <>
          <Image>
            <a href={`/shops/${props.hit.emprezzoID}/`} title={props.hit.name && props.hit.name.toLowerCase()} target="_blank">
              {props.hit.imageURL &&
                <img src={props.hit.imageURL} />
              }
            </a>
          </Image>

          <StyledLink href="javascript:void(0)" onClick={() => openDialog()} title={props.hit.shopName}>
            <Information>
              <ShopName>{(props.hit.shopName || "").substring(0, 22)}   {props.hit.maxPrice > currentPrice &&
                <strike>${props.hit.maxPrice}</strike>
              }
                {` `}${currentPrice}</ShopName>
              <Title>{props.hit.name && props.hit.name.toLowerCase().substring(0, 24)}</Title>
            </Information>
          </StyledLink>



          <StyledDialog isOpen={showDialog} onDismiss={closeDialog}>
            <button className="close-button" onClick={closeDialog} style={{ float: "right", cursor: "pointer" }}>
              <span aria-hidden>X</span>
            </button>
            <div className="dialogImageDescription">
              <div className="dialogImage">
                {props.hit.imageURL &&
                  <img src={props.hit.imageURL} />
                }
              </div>
              <div className="dialogRight">
                <h3 style={{ 'font-size': '1.1rem', 'margin-bottom': '9px' }}>{props.hit.name}</h3>
                <span style={{ 'margin-bottom': '12px', 'font-style': 'italic' }}><a href={`/shops/${props.hit.emprezzoID}/`}>{props.hit.shopName || props.hit.name}</a> ${currentPrice}</span>
                <div className="dialogDescription">{props.hit.description && props.hit.description}</div>
                <div style={{ 'marginTop': '1rem' }}>
                  {convertToSelectList(props.hit.variantTitles, props.hit.variantPrice, props.hit.variantIDs)}
                </div>
              </div>
            </div>
            <br />
            <div>
              <a href={props.hit.productURL} target="_blank" className="button">Shop at {props.hit.shopName}</a>
              <a href="javascript:" onClick={() => addToCartWrapper(props.hit)} className="button buttonalt">Save for later</a>
              {(props.hit.name || "").toLowerCase().indexOf("gift card") >= 0 &&
                <ShopifyCart
                  quantity={parseInt(currentPrice,10)}
                  customAttributes={[
                    {
                      key: "productName",
                      value: props.hit.name
                    }, {
                      key: "price",
                      value: "" + (currentPrice || props.hit.price)
                    }, {
                      key: "imageURL",
                      value: props.hit.imageURL
                    }, {
                      key: "productURL",
                      value: props.hit.productURL
                    }, {
                      key: "productID",
                      value: "" + props.hit.productID
                    }, {
                      key: "shopName",
                      value: "" + props.hit.shopName
                    }, {
                      key: "variant",
                      value: ""+currentVariantText
                    }
                  ]}
                />
              }
            </div>

          </StyledDialog>
          <Dialog isOpen={showMessageDialog} onDismiss={closeMessageDialog}>
                <button className="close-button" onClick={closeMessageDialog} style={{ float: "right", cursor: "pointer" }}>
                    <span aria-hidden>X</span>
                </button>
                <div>Product saved Successfully. <br /><a href="/savedstores">Click Here</a> to see the saved product list</div>
                <br />
                <div>
                    <button className="button" onClick={() => { closeMessageDialog(); }}>Close</button>
                </div>
            </Dialog>
        </>
      }
    </Wrapper>
  );
}