index.js

import React from "react";
import PropTypes from "prop-types";
import { Query } from "lib/Query";
import styled from "styled-components";
import Button from "components/Button";
import Icon from "components/icons";

const TextWrapper = styled.div`
  margin: 15px;
`;

const ButtonWrapper = styled.div`
  margin: auto;
  width: 240px;
`;

const NoBizWrapper = styled.div`
  margin: auto;
  max-width: 275px;
  text-align: center;
`;

const HeaderTitle = styled.h3`
  font-size: 24px;
`;

const SubText = styled.p`
  font-size: 16px;
  font-weight: 400;
`;

const Padding = styled.div`
  padding: 50px;
`;

const NoBusinesses = () => {
  return (
    <NoBizWrapper>
      <Padding />
      <Icon name="storefront" size="90" fill="none" />
      <HeaderTitle>No registered business</HeaderTitle>
      <SubText>
        You don't have a registered business associated with your account yet.
      </SubText>
      <ButtonWrapper>
        <Button>Add your business</Button>
      </ButtonWrapper>
      <Padding />
    </NoBizWrapper>
  );
};

function PageQuery({
  noBusinessError,
  userType,
  query,
  suppressLoader,
  children,
  readType,
}) {
  return (
    <Query
      userType={userType}
      query={query}
      readType={readType}
      render={{
        Loading: () =>
          suppressLoader ? <></> : <TextWrapper>Loading...</TextWrapper>,
        Error: (error) => {
          const { response } = error;
          const status = response?.status;
          const keys = Object.keys(query);
          if (
            noBusinessError &&
            status &&
            status === 404 &&
            keys.includes("vendorBusiness")
          ) {
            return NoBusinesses();
          }
          return <p>Error!</p>;
        },
        Success: (props) => {
          return children(props);
        },
      }}
    />
  );
}

PageQuery.propTypes = {
  noBusinessError: PropTypes.bool,
  suppressLoader: PropTypes.bool,
  query: PropTypes.object.isRequired,
  userType: PropTypes.string,
  children: PropTypes.func.isRequired,
  readType: PropTypes.string,
};

PageQuery.defaultProps = {
  userType: "customer",
  suppressLoader: false,
  noBusinessError: false,
  readType: "get",
};

export default PageQuery;