{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "font-size": "12px"
  },
  "txtContent": "[$Status]",
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "children": [
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "div",
              "style": {
                "padding": "15px 45px 15px 15px"
              },
              "children": [
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "div",
                      "style": {
                        "font-size": "18px",
                        "font-weight": "550",
                        "text-align": "center",
                        "margin-bottom": "10px"
                      },
                      "txtContent": "Tracking details"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "padding-left": "15px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "StatusCircleCheckmark",
                        "class": "ms-fontColor-green"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "margin-left": "-16px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "CircleRing",
                        "class": "ms-fontColor-green"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "=if([$StatusCode] > 0, '16px', '')",
                        "font-weight": "=if([$StatusCode] > 0, '600', '')",
                        "padding-left": "9px"
                      },
                      "txtContent": "Ready to be packed",
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 0, 'green', 'green')"
                      }
                    },
                    {
                      "elmType": "div",
                      "style": {
                        "font-size": "10px",
                        "font-weight": "600",
                        "text-align": "center"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 0, 'black', 'black')"
                      }
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "border-left-style": "solid",
                        "border-left-color": "='ms-borderColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')",
                        "text-align": "center",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')"
                      }
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "padding-left": "15px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "=if([$StatusCode] > 0, 'StatusCircleCheckmark', 'CircleRing')",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "margin-left": "-16px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "CircleRing",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "=if([$StatusCode] > 0, '16px', '')",
                        "font-weight": "=if([$StatusCode] > 0, '600', '')",
                        "padding-left": "9px"
                      },
                      "txtContent": "Packed",
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "div",
                      "style": {
                        "font-size": "10px",
                        "font-weight": "600",
                        "text-align": "center",
                        "border-left-style": "solid",
                        "border-left-color": "=if([$StatusCode] > 1,'green','neutralSecondaryAlt')",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 0, 'black', 'black')"
                      },
                      "txtContent": "[$PackedDate]"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "border-left-style": "solid",
                        "border-left-color": "='ms-borderColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')"
                      }
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "padding-left": "15px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "=if([$StatusCode] > 1, 'StatusCircleCheckmark', 'CircleRing')",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "margin-left": "-16px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "CircleRing",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "=if([$StatusCode] > 1, '16px', '')",
                        "font-weight": "=if([$StatusCode] > 1, '600', '')",
                        "padding-left": "9px"
                      },
                      "txtContent": "Shipped",
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "div",
                      "style": {
                        "font-size": "10px",
                        "font-weight": "600",
                        "text-align": "center",
                        "border-left-style": "solid",
                        "border-left-color": "=if([$StatusCode] > 2,'green','neutralSecondaryAlt')",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 1, 'black', 'black')"
                      },
                      "txtContent": "[$ShippedDate]"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "border-left-style": "solid",
                        "border-left-color": "='ms-borderColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
                      }
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "padding-left": "15px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "=if([$StatusCode] > 2, 'StatusCircleCheckmark', 'CircleRing')",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "margin-left": "-16px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "CircleRing",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "=if([$StatusCode] > 2, '16px', '')",
                        "font-weight": "=if([$StatusCode] > 2, '600', '')",
                        "padding-left": "9px"
                      },
                      "txtContent": "In transit",
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "div",
                      "style": {
                        "font-size": "10px",
                        "font-weight": "600",
                        "text-align": "center",
                        "border-left-style": "solid",
                        "border-left-color": "=if([$StatusCode] > 3,'green','neutralSecondaryAlt')",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 2, 'black', 'black')"
                      },
                      "txtContent": "[$InTransitStartDate]"
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "border-left-style": "solid",
                        "border-left-color": "='ms-borderColor-' + if([$StatusCode] > 3,'green','neutralSecondaryAlt')",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 3,'green','neutralSecondaryAlt')"
                      }
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "padding-left": "15px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "=if([$StatusCode] > 3, 'StatusCircleCheckmark', 'CircleRing')",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 3,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "16px",
                        "font-weight": "600",
                        "margin-left": "-16px"
                      },
                      "txtContent": " ",
                      "attributes": {
                        "iconName": "CircleRing",
                        "class": "='ms-fontColor-' + if([$StatusCode] > 3,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "font-size": "=if([$StatusCode] > 3, '16px', '')",
                        "font-weight": "=if([$StatusCode] > 3, '600', '')",
                        "padding-left": "9px"
                      },
                      "txtContent": "Delivered",
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 3,'green','neutralSecondaryAlt')"
                      }
                    },
                    {
                      "elmType": "div",
                      "style": {
                        "font-size": "10px",
                        "font-weight": "600",
                        "text-align": "center",
                        "margin-left": "21px"
                      },
                      "attributes": {
                        "class": "='ms-fontColor-' + if([$StatusCode] > 3, 'black', 'black')"
                      },
                      "txtContent": "[$DeliveredDate]"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    "openOnEvent": "hover",
    "directionalHint": "bottomCenter",
    "isBeakVisible": true
  }
}