File

projects/storefrontlib/cms-components/myaccount/consent-management/components/consent-form/consent-management-form.component.ts

Implements

OnInit

Metadata

selector cx-consent-management-form
templateUrl ./consent-management-form.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor()

Inputs

consent
Type : AnonymousConsent
consentTemplate
Type : ConsentTemplate
requiredConsents
Type : string[]
Default value : []

Outputs

consentChanged
Type : EventEmitter

Methods

isRequired
isRequired(templateId: string)
Parameters :
Name Type Optional
templateId string No
Returns : boolean
ngOnInit
ngOnInit()
Returns : void
onConsentChange
onConsentChange()
Returns : void

Properties

consent
Type : AnonymousConsent
Decorators :
@Input()
consentChanged
Default value : new EventEmitter<{ given: boolean; template: ConsentTemplate; }>()
Decorators :
@Output()
consentGiven
Default value : false
consentTemplate
Type : ConsentTemplate
Decorators :
@Input()
requiredConsents
Type : string[]
Default value : []
Decorators :
@Input()
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import {
  AnonymousConsent,
  ANONYMOUS_CONSENT_STATUS,
  ConsentTemplate,
} from '@spartacus/core';

@Component({
  selector: 'cx-consent-management-form',
  templateUrl: './consent-management-form.component.html',
})
export class ConsentManagementFormComponent implements OnInit {
  consentGiven = false;

  @Input()
  consentTemplate: ConsentTemplate;

  @Input()
  requiredConsents: string[] = [];

  @Input()
  consent: AnonymousConsent;

  @Output()
  consentChanged = new EventEmitter<{
    given: boolean;
    template: ConsentTemplate;
  }>();

  constructor() {}

  ngOnInit(): void {
    if (this.consent) {
      this.consentGiven = Boolean(
        this.consent.consentState === ANONYMOUS_CONSENT_STATUS.GIVEN
      );
    } else {
      if (this.consentTemplate && this.consentTemplate.currentConsent) {
        if (this.consentTemplate.currentConsent.consentWithdrawnDate) {
          this.consentGiven = false;
        } else if (this.consentTemplate.currentConsent.consentGivenDate) {
          this.consentGiven = true;
        }
      }
    }
  }

  onConsentChange(): void {
    this.consentGiven = !this.consentGiven;

    this.consentChanged.emit({
      given: this.consentGiven,
      template: this.consentTemplate,
    });
  }

  isRequired(templateId: string): boolean {
    return this.requiredConsents.includes(templateId);
  }
}
<div class="form-check">
  <label>
    <input
      type="checkbox"
      class="form-check-input"
      (change)="onConsentChange()"
      [checked]="consentGiven"
      [disabled]="isRequired(consentTemplate?.id)"
    />
    <span class="form-check-label cx-be-bold">
      {{ consentTemplate?.name }}
    </span>
    <br />
    <span class="form-check-label">
      {{ consentTemplate?.description }}
    </span>
  </label>
</div>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""