Conga Digital Commerce 202405.2.0 on Conga Revenue Lifecycle Platform
  1. Components
  2. TableRowSubItemComponent

File

projects/congarevenuecloud/elements/src/lib/line-item-table-row/table-row-sub-item/table-row-sub-item.component.ts

Description

The component represents the charge line items of the cart line items.

Implements

OnInit OnChanges

Metadata

selector apt-table-row-sub-item
styleUrls ./table-row-sub-item.component.scss
templateUrl ./table-row-sub-item.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(cartService: CartService, storefrontService: StorefrontService, exceptionService: ExceptionService)
Parameters :
Name Type Optional
cartService CartService No
storefrontService StorefrontService No
exceptionService ExceptionService No

Inputs

cart
Type : Cart

Instance of the current cart.
editableFields
Type : boolean
Default value : true

Flag defines whether line item fields should be editable.
isFavoriteConfigurationItem
Type : boolean
Default value : false

Flag to check favorite configuration item
readOnly
Type : boolean
Default value : false

Flag to check if this component should be read only.
showCustomFields
Type : boolean
Default value : false

Flag defines whether custom fields to be shown or not.
subItem
Type : CartItem

Multi charge cart item reference for this component.

Methods

changeItemQuantity
changeItemQuantity(cartItem: CartItem)

Changes the quantity of the cart item passed to this method.

Parameters :
Name Type Optional Description
cartItem CartItem No

Cart item reference to change quantity.
Returns : void
handleEndDateChange
handleEndDateChange(cartItem: CartItem)

Event handler for when the end date changes.

Parameters :
Name Type Optional Description
cartItem CartItem No

Cart item to update.
Returns : void
handleStartChange
handleStartChange(cartItem: CartItem)

Event handler for when the start date changes.

Parameters :
Name Type Optional Description
cartItem CartItem No

Cart item to update.
Returns : void
updateAdjustments
updateAdjustments(cartItem: CartItem)

Changes the adjustment amount and type.

Parameters :
Name Type Optional Description
cartItem CartItem No

Cart item reference to change adjustment amount and adjusment type.
Returns : void

Properties

enablePromotions$
Type : Observable<boolean> 
<div class="card accordion-card px-4">
  <div class="card-header accordionHeader bg-transparent collapsed pr-0 border-bottom-0 h-100 px-4" role="button"
    data-toggle="collapse" [attr.data-target]="'#collapse' + subItem?.ItemSequence + subItem?.LineNumber">
    <i class="fas fa-chevron-right downArrow p-2 px-4" id="downArrow"></i>
    <div class="d-flex">
      <span id="chargeType" class="ml-2 inputSection">
        {{subItem?.ChargeType}}
        <b *ngIf="subItem?.AddedByRuleInfo" class="badge badge-pill badge-primary" title="Included">{{ 'COMMON.INCLUDED'
          | translate}}</b>
        <ng-template [ngTemplateOutlet]="statusBadge" [ngTemplateOutletContext]="{subItem: subItem}"></ng-template>
      </span>
      <span class="px-3 priceSection d-lg-flex d-md-flex d-sm-none d-none headerPrice" id="subItem">
        <apt-output-field [record]="subItem" field="NetPrice" [labelOnly]="true"
          [labelClass]="'font-weight-normal mt-2'">
        </apt-output-field>
        <span class="ml-auto chargeType">{{subItem?.NetPrice | localCurrency | async}}</span>
      </span>
      <span class="priceSection d-lg-none d-md-none d-sm-flex d-flex headerPrice" id="subItem">
        <span class="ml-auto chargeType">{{subItem?.NetPrice | localCurrency | async}}</span>
      </span>
    </div>
  </div>
  <div [id]="'collapse' + subItem?.ItemSequence + subItem?.LineNumber" class="collapse">
    <div class="d-flex py-2 pl-0">
      <div class="col-md-8 col-lg-8 col-12 h-100 pr-2">
        <div *ngIf="!isCartLineItem(subItem)">
          <div class="d-flex flex-flow flex-wrap">
            <div class="flex-shrink-1 col-md-4 mb-2 pl-0"
              *ngIf="subItem?.PriceType === 'Recurring' || subItem?.PriceType === 'Usage'">
              <apt-output-field [record]="subItem" field="Frequency" layout="stacked" label="Frequency"
                [editable]="editableFields"></apt-output-field>
            </div>
            <div class="flex-shrink-1 col-md-4 mb-2 pl-0"
              *ngIf="subItem?.PriceType === 'Recurring' || subItem?.PriceType === 'Usage'">
              <apt-output-field [record]="subItem" field="PriceType" layout="stacked" label="Price Type"
                [editable]="editableFields"></apt-output-field>
            </div>
            <div class="flex-shrink-1 col-md-4 mb-2 pl-0"
              *ngIf="subItem?.PriceType === 'Recurring' || subItem?.PriceType === 'Usage'">
              <apt-output-field [record]="subItem" label="SellingTerm" field="SellingTerm" layout="stacked"
                [editable]="editableFields">
              </apt-output-field>
            </div>
          </div>
        </div>

        <div class="row" *ngIf="!isCartLineItem(subItem); else displayFields">
          <apt-date-range-input class="flex-shrink-1 col-md-8 pl-0 mb-2"
            *ngIf="subItem?.PriceType === 'Recurring' || subItem?.PriceType === 'Usage'"
            [disableStartDate]="subItem?.LineStatus?.toLowerCase() !=='new'" small="true"
            (onStartDateChange)="handleStartChange(subItem)" (onEndDateChange)="handleEndDateChange(subItem)"
            [inputSize]="'small'" [cartItem]="subItem" [readonly]="readOnly"></apt-date-range-input>
        </div>
        <div class="row" *ngIf="!isCartLineItem(subItem); else displayFields">
          <div class="flex-shrink-1 col-md-4 mb-2">
            <apt-input-field [(ngModel)]="subItem.Quantity" field="Quantity" [entity]="subItem"
              (change)="changeItemQuantity(subItem)" [readonly]="subItem?.LineStatus?.toLowerCase() ==='cancelled'"
              [errorMsg]="'ERROR.INVALID_QUANTITY'" [asterisk]="false" [required]="true" *ngIf="!readOnly"
              [inputSize]="'small'">
            </apt-input-field>
            <apt-output-field [record]="subItem" field="Quantity" label="{{'COMMON.QUANTITY' | translate}}"
              *ngIf="readOnly" [editable]="editableFields"></apt-output-field>
          </div>

          <!-- Adjustment Type / Adjustment Amount -->
          <div class="flex-shrink-1 col-md-4" *ngIf="!isCartLineItem(subItem)">
            <apt-input-field [(ngModel)]="subItem.AdjustmentType" [entity]="subItem" field="AdjustmentType"
              *ngIf="!readOnly" [label]="'COMMON.ADJUSTMENT_TYPE' | translate"
              [readonly]="subItem?.LineStatus?.toLowerCase() ==='cancelled'" [inputSize]="'small'"></apt-input-field>
            <apt-output-field [record]="subItem" field="AdjustmentType" [label]="'COMMON.ADJUSTMENT_TYPE' | translate"
              *ngIf="readOnly" [editable]="editableFields">
            </apt-output-field>
          </div>
          <div class="flex-shrink-1 col-md-4">
            <apt-input-field [(ngModel)]="subItem.AdjustmentAmount" [entity]="subItem" field="AdjustmentAmount"
              [inputSize]="'small'" *ngIf="!readOnly" [label]="'COMMON.ADJUSTMENT_AMOUNT' | translate"
              (change)="updateAdjustments(subItem)" [readonly]="subItem?.LineStatus?.toLowerCase() ==='cancelled'"
              minVal="0" [inputSize]="'small'"></apt-input-field>
            <apt-output-field [record]="subItem" field="AdjustmentAmount"
              [label]="'COMMON.ADJUSTMENT_AMOUNT' | translate" *ngIf="readOnly" [editable]="editableFields">
            </apt-output-field>
          </div>
        </div>
      </div>
      <div class="border-left col-md-4 col-lg-4 pl-md-3 col-12 d-none d-lg-block d-md-block d-dm-block">
        <div class="d-flex justify-content-between mt-1">
          <label id="unitPrice"> {{'MANAGE_CART.CART_TABLE.UNIT_PRICE' | translate }} </label>
          <span>
            <span> {{subItem?.ListPrice | localCurrency | async}} </span>
          </span>
        </div>
        <div class="d-flex justify-content-between align-items-center mt-1">
          <label id="extendedPrice"> {{'MANAGE_CART.CART_TABLE.EXTENDED_PRICE' | translate }} </label>
          <span> {{subItem?.ExtendedPrice | localCurrency | async}} </span>
        </div>
        <div class="d-flex justify-content-between align-items-center mt-1" id="difference">
          <label> {{'MANAGE_CART.CART_TABLE.ADJUSTMENTS' | translate }} </label>
          <span> {{(subItem?.NetPrice - subItem?.ExtendedPrice) | localCurrency | async}} </span>
        </div>
        <div class="d-flex justify-content-between mt-1"
          *ngIf="subItem?.IncentiveAdjustmentAmount && (enablePromotions$ | async) && (storefront$ | async) !== null ? true : false; else applyPromotion">
          <button class="btn btn-link text-primary btn-sm p-0 "
            (click)="promotionModal.openLineItemModal(subItem)">{{'PROMOTION.PROMOTION_APPLIED_TO' |
            translate}}</button>
          <span class="mt-1">{{subItem?.IncentiveAdjustmentAmount | localCurrency | async}}</span>
        </div>
        <ng-template #applyPromotion>
          <div class="d-flex justify-content-between mt-1" *ngIf="(enablePromotions$ | async) && !readOnly">
            <button class="btn btn-link text-primary btn-sm p-0 w-100"
              (click)="promotionModal.openLineItemModal(subItem)">{{'PROMOTION.APPLY_PROMOTION' |
              translate}}</button>
          </div>
        </ng-template>
        <div class="d-flex justify-content-between align-items-center mt-1" id="netPrice">
          <label> {{'MANAGE_CART.CART_TABLE.NET_PRICE' | translate }} </label>
          <span> {{subItem?.NetPrice | localCurrency | async}} </span>
        </div>
      </div>
    </div>
    <div class="d-flex py-2 px-2">
      <div class="border-top col-12 d-block d-lg-none d-md-none d-dm-none px-0 pt-2">
        <div class="d-flex justify-content-between mt-1">
          <label id="unitPrice"> {{'MANAGE_CART.CART_TABLE.UNIT_PRICE' | translate }} </label>
          <span>
            <span> {{subItem?.ListPrice | localCurrency | async}} </span>
          </span>
        </div>
        <div class="d-flex justify-content-between align-items-center mt-1">
          <label id="extendedPrice"> {{'MANAGE_CART.CART_TABLE.EXTENDED_PRICE' | translate }} </label>
          <span> {{subItem?.ExtendedPrice | localCurrency | async}} </span>
        </div>
        <div class="d-flex justify-content-between align-items-center mt-1" id="difference">
          <label> {{'MANAGE_CART.CART_TABLE.ADJUSTMENTS' | translate }} </label>
          <span> {{(subItem?.NetPrice - subItem?.ExtendedPrice) | localCurrency | async}} </span>
        </div>
        <div class="d-flex justify-content-between mt-1"
          *ngIf="subItem?.IncentiveAdjustmentAmount && (enablePromotions$ | async) && (storefront$ | async) !== null ? true : false; else applyPromotion">
          <button class="btn btn-link text-primary btn-sm p-0 "
            (click)="promotionModal.openLineItemModal(subItem)">{{'PROMOTION.PROMOTION_APPLIED_TO' |
            translate}}</button>
          <span class="mt-1">{{subItem?.IncentiveAdjustmentAmount | localCurrency | async}}</span>
        </div>
        <ng-template #applyPromotion>
          <div class="d-flex justify-content-between mt-1" *ngIf="(enablePromotions$ | async) && !readOnly">
            <button class="btn btn-link text-primary btn-sm p-0 w-100"
              (click)="promotionModal.openLineItemModal(subItem)">{{'PROMOTION.APPLY_PROMOTION' |
              translate}}</button>
          </div>
        </ng-template>
        <div class="d-flex justify-content-between align-items-center mt-1" id="netPrice">
          <label> {{'MANAGE_CART.CART_TABLE.NET_PRICE' | translate }} </label>
          <span> {{subItem?.NetPrice | localCurrency | async}} </span>
        </div>
      </div>
    </div>
  </div>
</div>

<ng-template #displayFields>
  <div class="row">
    <div class="col-lg-4 col-md-6 col-12" *ngFor="let view of userView; let i=index">
      <!-- Render input field -->
      <ng-container *ngIf="view?.fieldName !== 'StartDate' && view?.fieldName !== 'EndDate'; else date">
        <apt-input-field *ngIf="view.isEditable; else outputField" [entity]="subItem"
          [(ngModel)]="subItem[view.fieldName]" [small]="true" [class]="view.fieldName" [field]="view.fieldName"
          [rows]="1" (change)="updateValues(subItem)" [displayFieldType]="'radio'">
        </apt-input-field>
      </ng-container>
      <!-- Render output field -->
      <ng-template #outputField>
        <apt-output-field [record]="subItem" [class]="view.fieldName" layout="stacked" [field]="view.fieldName"
          [label]="view.label" [editable]="editableFields">
        </apt-output-field>
      </ng-template>
      <!-- Render Start/End date -->
      <ng-template #date>
        <apt-date-range-input (onStartDateChange)="changeItemQuantity(subItem)"
          (onEndDateChange)="changeItemQuantity(subItem)" [cartItem]="subItem"
          [readonly]="!view?.isEditable || (subItem?.PriceType !== 'Recurring' && subItem?.PriceType !== 'Usage')"
          [displayDate]="view.fieldName">
        </apt-date-range-input>
      </ng-template>
    </div>
  </div>
</ng-template>

<apt-pr-modal [cart]="cart" #promotionModal></apt-pr-modal>
<ng-template #statusBadge let-subItem="subItem">
  <ng-container [ngSwitch]="subItem?.LineStatus">
    <span class="badge ml-2 badge-danger" *ngSwitchCase="'Cancelled'">
      {{subItem?.LineStatus}}
    </span>
    <span class="badge ml-2 badge-warning" *ngSwitchCase="'Renewed'">
      {{subItem?.LineStatus}}
    </span>
    <span class="badge ml-2 badge-info" *ngSwitchCase="'Upgraded'">
      {{subItem?.LineStatus}}
    </span>
    <span class="badge ml-2 badge-warning" *ngSwitchCase="'Amended'">
      {{subItem?.LineStatus}}
    </span>
    <span class="badge ml-2 badge-warning" *ngSwitchCase="'Incremented'">
      {{subItem?.LineStatus}}
    </span>
    <span class="badge ml-2 badge-light" *ngSwitchCase="'Existing'">
      {{subItem?.LineStatus}}
    </span>
  </ng-container>
</ng-template>

./table-row-sub-item.component.scss 

:host > div {
  font-size: inherit;
}

.headerPrice {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.inputSection {
  width: 76%;
}

.priceSection {
  width: 36%;
}

.accordionHeader {
  font-size:1rem;
  cursor: pointer;
  .downArrow {
    position: absolute;
    left: 6px;
    transition: transform 0.35s ease;
  }
  &.collapsed {
    .downArrow {
      transform: rotate(-90deg);
    }

    .headerPrice {
      opacity: 1;
    }
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""