NO data snippet

<!-- No Payment Box (For Awaiting Payment Except Partial) -->
  <div
    class="no-payment"
    *ngIf="
      (ordersData?.paymentDTO?.status | lowercase) == 'awaiting payment' &&
      (ordersData?.paymentDTO?.partial | lowercase) == 'no'
    "
  >
    <img
      src="https://ik.imagekit.io/2gwij97w0o/Client_portal_frontend_assets/img/no-payment.svg?updatedAt=1633070377316"
    />
    <p>
      Payment for this order item has not been reconciled yet. Ensure that all the latest payment reports for this sales
      channel have been uploaded
    </p>
    <a class="add-payment" (click)="onNavigate('payout')"> + Add payment report </a>
  </div>

<ng-template #settingsSalesChannel>
  <div class="settings-channel">
    <img src="https://ik.imagekit.io/2gwij97w0o/no-data-order-details.svg?updatedAt=1727270008916" />
    <img src="https://ik.imagekit.io/2gwij97w0o/configure-payment.svg?updatedAt=1727270118860" />
    <div class="settings-channel-text">
      <span>Payment reconciliation settings have not been enabled for this sales channel</span>
      <div class="settings-channel-button" (click)="navigateToAppSettings()">Configure now</div>
    </div>
  </div>
</ng-template>








  navigateToAppSettings() {
    if (this.matchedSalesChannel.connectionData.appInstallationId && this.matchedSalesChannel.connectionData.id) {
      this.router.navigate(['installed-app-list/detail', this.matchedSalesChannel.connectionData.appInstallationId], {
        queryParams: {
          connectionId: this.matchedSalesChannel.connectionData.id
        }
      });
    }
  }






.settings-channel {
  display: grid;
  justify-content: center;
  padding: 24px;
  width: 100%;
  grid-template-rows: auto 0px auto;
  gap: 16px;
  img {
    object-fit: none;
    margin: 0 auto;
  }
  img:nth-child(2) {
    position: relative;
    bottom: 92px;
  }
  &-text {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    span {
      font-family: Inter;
      font-size: 12px;
      font-weight: 400;
      line-height: 14.52px;
      text-align: center;
    }
  }
  &-button {
    font-family: Inter;
    font-size: 14px;
    font-weight: 500;
    line-height: 16.94px;
    text-align: left;
    color: #fa5c5d;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  &-button:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    cursor: pointer;
    background-image: url('https://ik.imagekit.io/2gwij97w0o/external-redirect-link.svg?updatedAt=1705046079687');
  }
}