Skip to main content
Version: 2.0.0

sodexo-deposits-template

The sodexo-deposits-template component displays a list of all deposits for a specific user badge. This template includes built-in API integration and i18n support.

Authentication Required

This template requires a valid authentication token to access deposit data.

Properties​

PropertyHTML AttributeTypeDefaultDescription
themethemeThemeDefault Sodexo themeCustomization variables for Sodexo components theme
apiKeyapi-keystring-X-API-key for Sodexo API
tokentokenstring-Authentication token for Sodexo API
badgeIdbadge-idstring-Badge identifier to display deposits for

Events​

EventTypeDescription
sodexoDepositsTemplateLineClickedCustomEvent<DepositSelected>Emitted when a deposit line is clicked. Returns badgeId and depositId. Recommended action: Navigate to deposit detail page

Event Details​

DepositSelected​

interface DepositSelected {
  badgeId: string;
  depositId: string;
}

Usage​

<!DOCTYPE html>
<html>
<body>
  <sodexo-deposits-template
    api-key="your-api-key"
    token="user-auth-token"
    badge-id="badge-123"
  ></sodexo-deposits-template>

  <script>
    const element = document.querySelector('sodexo-deposits-template');
    
    // Apply custom theme
    element.theme = {
      '--sodexo-primary-color': '#283897',
      '--sodexo-primary-text-color': '#283897',
      '--sodexo-primary-background-color': '#f7f8ff',
      '--sodexo-font-family': 'Open Sans',
    };

    // Handle deposit line click
    element.addEventListener('sodexoDepositsTemplateLineClicked', (event) => {
      const { badgeId, depositId } = event.detail;
      console.log('Deposit clicked:', { badgeId, depositId });
      // Redirect to deposit detail
      window.location.href = `/deposits/${badgeId}/${depositId}`;
    });
  </script>

</body>
</html>

Property Naming Convention​

Naming Syntax

When using properties:

  • In HTML: Use kebab-case (e.g., api-key, badge-id)
  • In JavaScript: Use camelCase (e.g., apiKey, badgeId)
  • Events: Can only be handled in JavaScript, not in HTML attributes

This diagram shows the recommended navigation flow for the deposits template:

On sodexoDepositsTemplateLineClicked: Navigate to deposit detail page

const { badgeId, depositId } = event.detail;
navigate(`badges/${badgeId}/deposits/${depositId}`);