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

File

projects/congarevenuecloud/elements/src/lib/cart-totals-view/cart-totals-view.component.ts

Description

CartTotalsView component is used to show the detailed breakup of cart totals on the cart in a modal window.

Usage

Example :
import { CartTotalsViewModule } from '@congarevenuecloud/elements';

@NgModule({
imports: [ CartTotalsViewModule, ...]
})
export class AppModule {}
Example :
```typescript
<app-cart-totals-view [flowName]='flowName' [summaryGroups]=value>
Example :

Implements

OnInit OnChanges

Metadata

encapsulation ViewEncapsulation.None
selector app-cart-totals-view
styleUrls ./cart-totals-view.component.scss
templateUrl ./cart-totals-view.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(modalService: BsModalService, storefrontService: StorefrontService, cartService: CartService)
Parameters :
Name Type Optional
modalService BsModalService No
storefrontService StorefrontService No
cartService CartService No

Inputs

flowName
Type : string

Flow name on the storefront object which has list of fields to be displayed on the modal.
readonly
Type : boolean
Default value : false

Flag to check if this component should be read only.
summaryGroups
Type : Array<SummaryGroup>

Array of summary group values to be displayed on the modal.

Methods

enableButton
enableButton(summaryGroup: Array<SummaryGroup>)

The method is responsible to enable the UPDATE button when the user updates the summary group field values of the cart. By default the UPDATE button is disabled.

Parameters :
Name Type Optional Description
summaryGroup Array<SummaryGroup> No

is an instance of array of Summary group object.
Returns : void
openCartTotalModals
openCartTotalModals()

Method opens the discard changes confirmation modal dialog.

Returns : void
updateModal
updateModal(summaryGroups: Array<SummaryGroup>)

Method updates the summary group values displayed on the Modal.

Parameters :
Name Type Optional
summaryGroups Array<SummaryGroup> No
Returns : void

Properties

loading
Type : boolean
Default value : false

Flag to show loader

 
<i class="fas fa-info-circle ml-1 custom-primary-icon" [class.d-none]="summaryGroups?.length <= 0"
  aria-hidden="true" (click)="openCartTotalModals()"></i>
<ng-template #CartTotalTemplate>
    <div class="modal-header d-flex flex-row-reverse px-0 pb-1">
      <div class="btn-wrapper d-flex align-items-center">
        <button type="button" class="close pull-right close-button p-0 m-0" aria-label="Close" (click)="cartTotalModal.hide()">
          <span aria-hidden="true">&times;
          </span>
        </button>
      </div>
    </div>
    <div class="modal-body bg-white scrollbar">
      <h4 class="modal-title font-weight-bold pb-3">{{'COMMON.CART_TOTALS' | translate }}
      </h4>
      <div class="table-responsive d-flex pb-2">
        <div class="font-weight-bold" *ngFor="let item of summaryGroups">
          <span tooltip="{{item?.Name}}" class="pr-5 font-size-10"> {{item?.Name | truncate:20}}
          </span>
          <ng-container>
            <div class="pr-5 font-size-18">{{ item?.NetPrice | localCurrency | async}}
            </div>
          </ng-container>
        </div>
      </div>
      <div class="table-responsive">
        <table class="mx-auto text-center table table-bordered text-black border-top">
          <thead class="thead-light">
            <tr>
              <ng-container *ngFor="let item of displays">
                <th scope="col" class="overflow-hidden p-2">{{ item?.Label }}
                </th>
              </ng-container>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let row of summaryGroups; let i = index">
              <td *ngFor="let item of displays">
                <apt-input-field *ngIf="item?.IsEditable; else lengthyString" [entity]="row"
                  [(ngModel)]="row[item?.FieldName]" [readonly]="readonly" (ngModelChange)="enableButton(summaryGroups)"
                  [valueClass]="(row?.LineType ==='Grand Total' && i === (summaryGroups.length - 1))"
                  [inputSize]="'small'" [showLabel]="false" [field]="item?.FieldName">
                </apt-input-field>
                <ng-template #lengthyString>
                  <span class="d-inline-block font-size-13"
                    [class.font-weight-bold]="(row?.LineType ==='Grand Total' && i === (summaryGroups.length - 1))"
                    *ngIf="(item?.FieldType ==='String' || item?.FieldType ==='LongString'); else readOnly">
                    {{row[item?.FieldName] ? row[item?.FieldName] : '-' }}
                  </span>
                </ng-template>
                <ng-template #readOnly>
                  <span class="d-inline-block font-size-13"
                    [class.font-weight-bold]="(row?.LineType ==='Grand Total' && i === (summaryGroups.length - 1))">
                    {{(row[item?.FieldName] || row[item?.FieldName] === 0) ?
                    row[item?.FieldName] : '-'}}
                  </span>
                </ng-template>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="border-top d-flex justify-content-end pt-4">
        <button class="btn btn-primary btn-raised" type="button" (click)="updateModal(summaryGroups)" [ladda]="loading"
          [disabled]="disabled" data-style="zoom-in">{{ "COMMON.UPDATE" | translate }}
        </button>
      </div>
    </div>
</ng-template>

./cart-totals-view.component.scss 

table thead tr th {
  text-overflow: ellipsis;
  white-space: nowrap;
}

table.table-bordered tbody tr td {

  apt-input-field {
    ng-select.picklist {
      ng-dropdown-panel .ng-dropdown-panel-items {
        max-height: 60px;
      }
    }

  }
}

p.text-center {
  cursor: pointer;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""