{
  "key": "file_component_invoice_details_grid",
  "name": "Invoice Details Grid",
  "size": "Any",
  "components": [
    {
      "type": "text",
      "label": "Invoice Number",
      "content": {
        "mode": "tag",
        "tag": "invoice_no",
        "prefix": "Invoice: "
      },
      "layout": {
        "width": 50,
        "newLine": true
      },
      "style": {
        "fontSize": 12,
        "bold": true,
        "textAlign": "left",
        "htmlTag": "p"
      }
    },
    {
      "type": "text",
      "label": "Invoice Date",
      "content": {
        "mode": "tag",
        "tag": "invoice_date",
        "prefix": "Date: "
      },
      "layout": {
        "width": 50,
        "newLine": false
      },
      "style": {
        "fontSize": 12,
        "textAlign": "right",
        "htmlTag": "p"
      }
    },
    {
      "type": "text",
      "label": "Customer Name",
      "content": {
        "mode": "tag",
        "tag": "customer_name",
        "prefix": "Customer: "
      },
      "layout": {
        "width": 65,
        "newLine": true
      },
      "style": {
        "fontSize": 12,
        "textAlign": "left",
        "htmlTag": "p"
      },
      "visibility": {
        "tokens": [
          "customer_name"
        ],
        "groupKey": "customer_line"
      }
    },
    {
      "type": "text",
      "label": "Payment Status",
      "content": {
        "mode": "tag",
        "tag": "payment_status"
      },
      "layout": {
        "width": 35,
        "newLine": false
      },
      "style": {
        "fontSize": 12,
        "bold": true,
        "textAlign": "right",
        "htmlTag": "p"
      },
      "visibility": {
        "tokens": [
          "payment_status"
        ],
        "groupKey": "status_line"
      }
    }
  ]
}