text: import React, { useState } from "react";
  import axios from "axios";
  import { Page, Card, Button } from "@shopify/polaris";
  
  import Spinner from "../Spinner/Spinner";
  
  const FetchOrder = () => {
    const [orders, setOrder] = useState([]);
    const [loading, setLoading] = useState(false);
    let cardData = "";
    const fetchOrders = async () => {
      console.log("fetching orders...");
      setLoading(true);
      const options = {
        headers: {
          "X-Shopify-Access-Token": "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",
        },
      };
  
      axios
        .get(
          "https://fierce-anchorage-98463.herokuapp.com/https://tasveertheka.myshopify.com/admin/api/2021-04/draft_orders.json",
          options
        )
        .then((response) => {
          let fetchedOrders = response.data.draft_orders;
          console.log(fetchedOrders[0]);
          setOrder(fetchedOrders);
          setLoading(false);
        })
        .catch((err) => console.log(err.message));
    };
    if (orders) {
      cardData = orders.map((order) => {
        return (
          <Card key={order.id} title={order.line_items.name} sectioned>
            <p>{`Product Name : ${order.line_items[0].name}`}</p>
            <p>{`Order Id : ${order.id}`}</p>
            <p>{`Order Total : ${order.subtotal_price}`}</p>
          </Card>
        );
      });
    }
    return (
      <Page>
        <Button onClick={() => fetchOrders()} ariaControls="basic-collapsible">
          fetch orders
        </Button>
        {loading ? <Spinner /> : cardData}
      </Page>
    );
  };
  export default FetchOrder;
  