useConsents()

The useConsents() composable allows for:

• loading consent templates
• giving consent
• removing consent

User consents management is done through the SAP Commerce Cloud API (opens new window). To manage anonymous (opens new window) consents, Vue Storefront leverages Local Storage.

consents

Main data object populated by the search() method.

Type

const consents: ComputedRef<ConsentTemplateList>;

References: ConsentTemplateList

Example

import { useConsents } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { consents } = useConsents();

    return { consents };
  }
};

loading

Indicates whether any of the composable methods is in progress.

Type

const loading: ComputedRef<UseConsentsLoading>;

References: UseConsentsLoading

error

Contains errors thrown by any of the composable methods.

Type

const error: ComputedRef<UseConsentsError>;

References: UseConsentsError

load()

Fetches consent templates from the API and saves the fetched object in the consents property. Under the hood, it sends requests to the getAllConsents API endpoint.

Type

export interface LoadConsentsProps {
  fields?: 'BASIC' | 'DEFAULT' | 'FULL' | string | string[];
  lang?: string;
}

async function load(props: LoadConsentsProps): Promise<void>;

References: LoadConsentsProps

Basic Example

import { onMounted } from '@nuxtjs/composition-api';
import { useConsents } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { load } = useConsents();

    onMounted(async () => {
      await load();
    });
  }
};

Custom response fields example

import { onMounted } from '@nuxtjs/composition-api';
import { useConsents } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { load } = useConsents();

    onMounted(async () => {
      await search({
        fields: 'consentTemplates(name,description)'
      });
    });
  }
};

giveConsent()

Marks consent as given and updates the consents property. Under the hood, it sends requests to the giveConsent API endpoint.

Type

export interface GiveConsentProps {
  consentTemplateId: string;
  consentTemplateVersion: number;
}

async function giveConsent(props: GiveConsentProps): Promise<void>;

References: GiveConsentProps

Example

<template>
  <!-- Template simplified for brevity -->
  <div v-for="template in consents.consentTemplates">
    <button @click="give(template)">Give consent</button>
  </div>
</template>

<script>
import { useConsents } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { consents, giveConsent } = useConsents();

    const give = (template) => {
      giveConsent({
        consentTemplateId: template.id,
        consentTemplateVersion: template.version
      });
    };

    return { consents, give };
  }
};
</script>

removeConsent()

Marks consent as withdrawn and updates the consents property. Under the hood, it sends requests to the removeConsent API endpoint.

Type

export interface RemoveConsentProps {
  consentTemplateId: string;
  consentCode: number;
}

async function removeConsent(props: RemoveConsentProps): Promise<void>;

References: RemoveConsentProps

Example

<template>
  <!-- Template simplified for brevity -->
  <div v-for="template in consents.consentTemplates">
    <button @click="remove(template)">Remove consent</button>
  </div>
</template>

<script>
import { useConsents } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { consents, removeConsent } = useConsents();

    const remove = (template) => {
      removeConsent({
        consentTemplateId: template.id,
        consentCode: template.currentConsent.code
      });
    };

    return { consents, remove };
  }
};
</script>

Exception!

While working with anonymous consents, consentCode param can be any number.

giveAllConsents()

A syntactic sugar method for marking all consents as given. Under the hood, it calls giveConsent for all existing consents using Promise.all() (opens new window).

Type

async function giveAllConsents(): Promise<void>;

Example

<template>
  <button @click="giveAllConsents">
    Give all consents
  </button>
</template>

<script>
export default {
  setup() {
    const { giveAllConsents } = useConsents();

    return { giveAllConsents };
  }
};
</script>

mergeAnonymousConsents()

Merges anonymous consents with user consents and updates the consents property. Under the hood, it calls giveConsent for all anonymous consents that hadn't been given by the user. Useful especially during login.

Type

async function mergeAnonymousConsents(): Promise<void>;

Example

<template>
  <button @click="handleLogin">Login</button>
</template>

<script>
import { useUser, useConsents } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    /* Script simplified for brevity */
    const { login } = useUser();
    const { mergeAnonymousConsents } = useConsents();

    const handleLogin = () => async () => {
      await login();
      await mergeAnonymousConsents();
    };

    return { handleLogin };
  }
};
</script>

isAccepted()

A helper method checking whether the consent is currently given. For anonymous consents, it checks Local Storage for presence of the consent template ID. For user consents, it checks the template's currentConsent property.

Type

async function isAccepted(template: ConsentTemplate): boolean

References: ConsentTemplate

Example

<template>
  <!-- Template simplified for brevity -->
  <div v-for="template in consents.consentTemplates">
    <SfCheckbox
      :selected="isAccepted(template)"
      :name="template.id"
      :label="template.description"
    />
  </div>
</template>

<script>
import { SfCheckbox } from '@storefront-ui/vue';
import { useConsents } from '@vsf-enterprise/sapcc';

export default {
  components: { SfCheckbox },
  setup() {
    const { consents, isAccepted } = useConsents();

    return { consents, isAccepted };
  }
};
</script>