service-provider-app/src/app/carnet/terms-conditions/terms-conditions.component.html

<div class="terms-container">
    <mat-card class="terms-card">
        <mat-card-header>
            <mat-card-title>ATA Carnet Terms and Conditions</mat-card-title>
        </mat-card-header>

        <mat-divider></mat-divider>

        <mat-card-content class="terms-content">
            <p>Agreement language will go here</p>
            <h3>Fees and Charges</h3>
            <p> The following fees apply:</p>
            <ul>
                <li *ngIf="estimatedFees.basicFee">Basic fee: {{estimatedFees.basicFee | currency}}</li>
                <li *ngIf="estimatedFees.counterFoilFee">Counterfoil Fee: {{estimatedFees.counterFoilFee | currency}}
                </li>
                <li *ngIf="estimatedFees.continuationSheetFee">Continuation sheet fee:
                    {{estimatedFees.continuationSheetFee | currency}}</li>
                <li *ngIf="estimatedFees.expeditedFee">Expedited fee: {{estimatedFees.expeditedFee | currency}}</li>
                <li *ngIf="estimatedFees.shippingFee">Shipping fee: {{estimatedFees.shippingFee | currency}}</li>
                <li *ngIf="estimatedFees.bondPremium">{{bondPremiumLabel}}: {{estimatedFees.bondPremium | currency}}
                </li>
                <li *ngIf="estimatedFees.cargoPremium">Cargo Premium: {{estimatedFees.cargoPremium | currency}}</li>
                <li *ngIf="estimatedFees.ldiPremium">LDI Premium: {{estimatedFees.ldiPremium | currency}}</li>
            </ul>
            <hr />
            <ul>
                <li *ngIf="estimatedFees.securityAmount">Security Amount: {{estimatedFees.securityAmount | currency}}
                </li>
                <li *ngIf="estimatedFees.insuredValue">Insured Value: {{estimatedFees.insuredValue | currency}}</li>
            </ul>
            <hr />
            <p class="total">Total: {{total | currency}}</p>
            <mat-checkbox [(ngModel)]="hasReadAllTerms" color="primary" class="read-checkbox">
                I have read and agree to all terms and conditions above
            </mat-checkbox>
        </mat-card-content>

        <mat-divider></mat-divider>

        <mat-card-actions align="end">
            <button mat-raised-button color="primary" (click)="onAccept()"
                [disabled]="!hasReadAllTerms || changeInProgress">
                Accept
            </button>
            <button mat-button (click)="onDecline()">Decline</button>
        </mat-card-actions>
    </mat-card>
</div>