Claim History View Example Json

claim_history_view_example.json

{
  "type": "claimHistory",
  "id": "12345",
  "image": {
    "type": "DOWNLOAD",
    "url": "https://path/to/woman/on/coins.png"
  },
  "rows": [
    {
      "type": "text",
      "content": {
        "text": "You have\n{{AMOUNT}} cash back available.",
        "font": "TITLE_1_MED",
        "color": "$black",
        "backgroundColor": "$white",
        "overflow": "MULTILINE",
        "variables": [
          {
            "key": "{{AMOUNT}}",
            "value": "$125.22",
            "font": "TITLE_1_BOLD",
            "color": "$black"
          }
        ]
      },
      "alt": "You have one hundred twenty five dollars and twenty two cents cash back available"
    },
    {
      "type": "actionRow",
      "actions": [
        {
          "text": {
            "text": "Cash out",
            "font": "SMALL_MED",
            "color": "$white",
            "backgroundColor": "$blue-2",
            "overflow": "MULTILINE",
            "variables": []
          },
          "icon": null,
          "alt": "cash out",
          "action": {
            "url": "upside://cashout",
            "alt": "cashout"
          }
        },
        {
          "text": null,
          "icon": {
            "type": "STATIC",
            "name": "icon_share",
            "color": "$grey-1",
            "backgroundColor": "$grey-2"
          },
          "alt": "share",
          "action": {
            "url": "upside://cashout",
            "alt": "share"
          }
        }
      ],
      "alt": "cash out or share"
    },
    {
      "type": "twoColumnText",
      "text": [
        {
          "text": "July",
          "font": "TITLE_4_MED",
          "color": "$black",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        }
      ],
      "align": [
        "LEFT"
      ],
      "alt": "July offer claims"
    },
    {
      "type": "iconActionCard",
      "icon": {
        "type": "DOWNLOAD",
        "url": "https://path/to/76/image.png"
      },
      "content": [
        {
          "text": "76",
          "font": "TITLE_4_MED",
          "color": "$black",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        },
        {
          "text": "PROCESSING...",
          "font": "BODY_1_BOLD",
          "color": "$grey-1",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        },
        {
          "text": "Nov 18, 2020",
          "font": "SMALL_REG",
          "color": "$grey-2",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        }
      ],
      "actionText": null,
      "actionIcon": {
        "type": "STATIC",
        "name": "icon_chevron_right"
      },
      "action": {
        "url": "upside://claim/detail/abcdef-12345-12345-12345",
        "alt": ""
      }
    },
    {
      "type": "iconActionCard",
      "icon": {
        "type": "DOWNLOAD",
        "url": "https://path/to/generic_grocery/image.png"
      },
      "content": [
        {
          "text": "Be Fresh Local Market",
          "font": "TITLE_4_MED",
          "color": "$orange-2",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        },
        {
          "text": "ISSUE FOUND",
          "font": "BODY_1_BOLD",
          "color": "$grey-1",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        },
        {
          "text": "Nov 5, 2020",
          "font": "SMALL_REG",
          "color": "$grey-2",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        }
      ],
      "actionText": null,
      "actionIcon": {
        "type": "STATIC",
        "name": "icon_chevron_right"
      },
      "action": {
        "url": "upside://claim/detail/abcdef-12345-12345-12345",
        "alt": ""
      }
    },
    {
      "type": "twoColumnText",
      "text": [
        {
          "text": "September",
          "font": "TITLE_4_MED",
          "color": "$black",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        },
        {
          "text": "$1.64",
          "font": "TITLE_4_BOLD",
          "color": "$green",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        }
      ],
      "align": [
        "LEFT",
        "RIGHT"
      ],
      "alt": "September offer claims. one dollar and sixty-four cents earned"
    },
    {
      "type": "iconActionCard",
      "icon": {
        "type": "DOWNLOAD",
        "url": "https://path/to/shell/image.png"
      },
      "content": [
        {
          "text": "Shell",
          "font": "TITLE_4_MED",
          "color": "$black",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        },
        {
          "text": "CASH BACK",
          "font": "BODY_1_BOLD",
          "color": "$grey-1",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        },
        {
          "text": "Nov 5, 2020",
          "font": "SMALL_REG",
          "color": "$grey-2",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        }
      ],
      "actionText": {
        "text": "$1.64",
        "font": "TITLE_4_BOLD",
        "color": "$green",
        "backgroundColor": "$white",
        "overflow": "MULTILINE",
        "variables": []
      },
      "actionIcon": {
        "type": "STATIC",
        "name": "icon_chevron_right"
      },
      "action": {
        "url": "upside://claim/detail/abcdef-12345-12345-12345",
        "alt": ""
      }
    },
    {
      "type": "twoColumnText",
      "text": [
        {
          "text": "August",
          "font": "TITLE_4_MED",
          "color": "$black",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        },
        {
          "text": "$3.60",
          "font": "TITLE_4_BOLD",
          "color": "$green",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        }
      ],
      "align": [
        "LEFT",
        "RIGHT"
      ],
      "alt": "September offer claims. one dollar and sixty-four cents earned"
    },
    {
      "type": "iconActionCard",
      "icon": {
        "type": "DOWNLOAD",
        "url": "https://path/to/76/image.png"
      },
      "content": [
        {
          "text": "76",
          "font": "TITLE_4_MED",
          "color": "$black",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        },
        {
          "text": "CASH BACK",
          "font": "BODY_1_BOLD",
          "color": "$grey-1",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        },
        {
          "text": "Aug 25, 2020",
          "font": "SMALL_REG",
          "color": "$grey-2",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        }
      ],
      "actionText": {
        "text": "$2.40",
        "font": "TITLE_4_BOLD",
        "color": "$green",
        "backgroundColor": "$white",
        "overflow": "MULTILINE",
        "variables": []
      },
      "actionIcon": {
        "type": "STATIC",
        "name": "icon_chevron_right"
      },
      "action": {
        "url": "upside://claim/detail/abcdef-12345-12345-12345",
        "alt": ""
      }
    },
    {
      "type": "iconActionCard",
      "icon": {
        "type": "DOWNLOAD",
        "url": "https://path/to/76/image.png"
      },
      "content": [
        {
          "text": "Shell",
          "font": "TITLE_4_MED",
          "color": "$black",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        },
        {
          "text": "CASH BACK",
          "font": "BODY_1_BOLD",
          "color": "$grey-1",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        },
        {
          "text": "August 5, 2020",
          "font": "SMALL_REG",
          "color": "$grey-2",
          "backgroundColor": "$white",
          "overflow": "MULTILINE",
          "variables": []
        }
      ],
      "actionText": {
        "text": "$1.20",
        "font": "TITLE_4_BOLD",
        "color": "$green",
        "backgroundColor": "$white",
        "overflow": "MULTILINE",
        "variables": []
      },
      "actionIcon": {
        "type": "STATIC",
        "name": "icon_chevron_right"
      },
      "action": {
        "url": "upside://claim/detail/abcdef-12345-12345-12345",
        "alt": ""
      }
    }
  ]
}

For the actions, we have a set of types with names from Metalab in Figma: https://www.figma.com/file/ktzLfNcj17OIWV9N4HDVG2/UI-Kit-Master-SHARED?node-id=3289%3A44081

I suggest using that somehow rather than configure font colors and other stuff for each action.